我在这里设置简单：
我有一个父组件,它有2个子组件附加到此父组件.在第一个子组件中：用户更改输入的值.然后,该更改的值将是我想从此子项传递给父项的prop,以便它可以传递给附加到同一父组件的另一个子项.
Main (parent component)___|
|_Child 1
|_Child 2
this the set up currently,please view
从用户输入到UI更改的流程：1.在“子1”中：调整滑块,onChange传递值到父组件; 2.将此prop(新滑块值)传递给Parent组件,以便它可用于“Child 2”组件; 3.那个prop,valueOfUserInput(新的滑块值)将用于关于样式化“Child 2”组件元素的if / else语句中.
我见过类似于我的问题的解决方案和教程,但它们对我来说并不合适.我一整天都在乱砍,穿插会议.
任何帮助或建议都会很棒.谢谢大家对这个React noob的耐心等待.
当您希望2个孩子进行通信或共享某些数据时,在React中执行此操作的方法是将状态提升(
source).
这意味着孩子们使用的州应该住在父母身边.然后父母将状态传递给孩子.
要从子进程中的操作更新状态,通常的模式是从在子进程中执行操作时调用的父进行传递函数.
这是一个应该做你想要的例子：
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = { valueOfUserInput: '' };
}
handleUserInputChange = event => {
this.setState({
valueOfUserInput: event.target.value,});
};
render() {
const { valueOfUserInput } = this.state;
return (
<div>
<Child1 valueOfUserInput={valueOfUserInput} onUserInputChange={this.handleUserInputChange} />
<Child2 valueOfUserInput={valueOfUserInput} />
</div>
);
}
}
class Child1 extends React.Component {
render() {
const { valueOfUserInput,onUserInputChange } = this.props;
return <input type="text" value={valueOfUserInput} onChange={onUserInputChange} />;
}
}
class Child2 extends React.Component {
render() {
const { valueOfUserInput } = this.props;
return (
<div>
{valueOfUserInput}
</div>
);
}
}
