親コンテナには、ユーザーが入力した入力を検証する関数があります。子コンポーネントの親メソッドを呼び出すことができません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>
validate関数がまったく呼び出されていません。誰もが間違いのアドバイスはできますか？
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>
ありがとう、この1つは魅力のように働いた！ – Begins0301
あり、この
てみてくださいここでは代わりにthis.props.update
以下のような
<input
value={this.props.inputValue}
onChange={this.props.onChange}
/>
this.props.onChangeを呼び出す必要があります
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>
コード内の問題は何ですか？ –