1
私はReactJSの新機能です。コンポーネント間の通信子どもと他の子供
私はあなたに簡単な質問をしたいと思います。
子供が変更されたとき、他の子供をどのように更新できますか？
ありがとうございます！
。 enter image description here 。
参考用に次のスニペットを使用してください。子供や他の子に
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
fieldVal: "Default Value",
}
}
onUpdate = (val) => {
this.setState({
fieldVal: val,
})
};
render() {
return (
<div>
<h2>Parent</h2>
Value in Parent Component State: {this.state.fieldVal}
<br/>
<Child passedVal={this.state.fieldVal} onUpdate={this.onUpdate} />
<br />
<OtherChild passedVal={this.state.fieldVal} onUpdate={this.onUpdate} />
</div>
)
}
}
class Child extends React.Component {
constructor(props) {
super(props);
this.state = {
fieldVal: props.passedVal,
}
}
update = (e) => {
this.props.onUpdate(e.target.value);
this.setState({fieldVal: e.target.value});
};
render() {
return (
<div>
<h4>Child</h4>
<p>Value in Child: {this.state.fieldVal}</p>
<input
type="text"
placeholder="type here"
onChange={this.update}
value={this.state.fieldVal}
/>
</div>
)
}
}
class OtherChild extends React.Component {
constructor(props) {
super(props);
this.state = {
fieldVal: this.props.passedVal,
}
}
update = (e) => {
this.props.onUpdate(e.target.value);
this.setState({fieldVal: e.target.value});
};
render() {
return (
<div>
<h4>OtherChild</h4>
<p>Value in OtherChild: {this.state.fieldVal}</p>
<input
type="text"
placeholder="type here"
onChange={this.update}
value={this.state.fieldVal}
/>
</div>
)
}
}
React.render(
<Parent />,
document.getElementById('react_example')
);<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.min.js"></script>
<meta charset="utf-8">
<title>React Hello World w/ JSBin</title>
</head>
<body>
<div id="react_example"></div>
</body>
</html>
どちらも 'fieldVal'を使うと、それらはそのまま再レンダリングされるはずですか？問題は、あなたが 'this.state.value'にバインドしていて、それが小道具にあるか、あなたが小道具の変更を聞いて、あなたの状態を更新する必要があるということです。たとえば、 'componentWillRecieveProps（newProps）{if（this.state.fieldValue！== newProps.passedVal）this.setState（{fieldVal：newProps.passedVal}）}}' - 制御された入力に対しては、https：// facebook.github.io/react/docs/uncontrolled-components.html –
@DimitarChristoffありがとうございます。 – Steve