Question

我有两个组件的两个输入框（每个一个）。每当我更改任何输入框中的值时，我需要更改另一个输入框中的值。这意味着更新的值需要使用React中的props在父级到子级和子级之间传递。

Answer 1

如果我理解你的问题：

更新：要设置两个输入中的值，您可以执行以下操作：

将setState函数从父组件传递到两个子组件
在每个子组件内部，在输入字段onChange处理程序上使用此传递函数 - 此函数将依次设置父组件中的状态
将父级状态传递给两个子组件
在每个子组件内部，使用具有父级状态的组件prop来设置输入字段中的值

此工作流程中包含 working demo ，您也可以在下方运行代码段：

class App extends React.Component {
  state = { inputValue: '' }
  handleChange = e => {
    this.setState({inputValue: e.target.value})
  }  
  render(){
    const {inputValue} = this.state;
    return(
      <div className='App'>
        <FirstInput handleChange={this.handleChange} inputValue={inputValue}/>
        <SecondInput handleChange={this.handleChange} inputValue={inputValue}/>        
      </div>
    );
  }
}

const FirstInput = ({handleChange, inputValue}) => <input placeholder='first input' onChange={handleChange} value={inputValue}/>;
const SecondInput = ({handleChange, inputValue}) => <input placeholder='second input' onChange={handleChange} value={inputValue}/>;


ReactDOM.render(<App />, document.getElementById('root'));

.App {
  display: flex;
  justify-content: space-around;
}

input {
  padding: 0.5rem;
  font-size: 1em;
  flex-grow: 0.4;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

如何在React中进行双向数据绑定？

1 个答案: