부모 컨테이너에는 사용자가 입력 한 입력을 검증하는 함수가 있습니다.자식 컴포넌트에서 부모 메소드를 호출 할 수 없습니다. reactjs
상위 렌더링에 하위 구성 요소가 있습니다.
render()
{
return (
<div>
<Child
value={this.props.inputValue}
onChange={this.update}
/>
</div>
}
Child render
<input
value={this.props.inputValue}
onChange={this.props.update}
/>
</div>
유효성 검사 기능이 전혀 호출되지 않았습니다. 누구든지 실수에 대해 조언 할 수 있습니까?
onChange이라는 소품 이름을 부모에서 자식으로 전달하고 있습니다. 따라서 귀하의 자녀 구성 요소에서 보조는 this.props.onChange으로 액세스 할 수 있습니다. 이
<!DOCTYPE html>
<html>
<head>
<title>React Hello World</title>
<meta charset="utf-8">
<script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<script type="text/jsx">
class Parent extends React.Component {
update() {
console.log("I am changed");
}
render() {
return (
<div>
Hello World!
<Child onChange={this.update} />
</div>
)
}
}
class Child extends React.Component {
render() {
return (<input type="text" name="test" defaultValue="" onChange={this.props.onChange}/>);
}
}
ReactDOM.render(
<Parent />,
document.getElementById("app")
);
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
감사합니다,이 하나는 매력처럼 작동! – Begins0301
<input
value={this.props.inputValue}
onChange={this.props.onChange}
/>
this.props.onChange 대신
this.props.update를 호출해야
validate(input) {
let value = input.target.value; //parent validate fun
}
render()
{
return (
<div>
<InputCom
value={this.props.inputValue}
validateHandler={this.validate}
/>
</div>
}
//Child render
<input
value={this.props.inputValue}
onChange={this.props.validateHandler('your param')}
/>
</div>
코드의 문제점은 무엇입니까? –