reactjs - 如何将输入值从子组件传递到父组件 react

Question

我正在学习 React，并且正在构建一个带有输入的表格组件来过滤数据。我的结构是:

• 过滤栏
• • 过滤输入

我希望我的 FilterBar 能够以这种方式将 FilterInput 值存储在类状态中 ==> this.state = {inputsVal: ["input1value", "input2value", "", ...]} 。
我为每个 header (数据库中的属性)动态构建一个输入组件。因此，当我在这些组件之一中写入时，我想捕获该组件的新值和位置，以便刷新 FilterBar 状态数组。我成功获取了组件的位置(索引)，但没有获取到值。我不知道如何实现这一目标。这是我的组件:

class FilterBar extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        inputs: Array(props.headers.length).fill("")
    };
    this.updateFilters = this.updateFilters.bind(this);
}

updateFilters(i) {
    console.log(i);   //==>I can see the index of the input when it changesbut i want also to see the new value
}

renderFilterInputs() {
    var filters = []
    for (let i=0; i < this.state.inputs.length; i++) {
        filters.push(<FilterInput key={i} filterApplied={this.state.inputs[i]} onChange={() => this.updateFilters(i)} />);
    }
    return filters;
}

render() {
    return (
      <tr className="filters-bar">
        {this.renderFilterInputs()}
      </tr>
    );
}

}
这是 FilterInput 组件

class FilterInput extends React.Component {
    render() {
        return (
            <td>
                <input type='text' className="form-control" defaultValue={this.props.filterApplied} onChange={() => this.props.onChange()} />
            </td>
        );
    }
}  

谢谢

Answer 1

您需要更改输入上的 FilterInput onChange= 处理程序:

<input onChange={event => this.props.onChange(event.target.value)} {...otherProps} />

显然，在两者之间设计一个 APi 合约，您可以将值或原始事件传递给 onChange 处理程序，并在父级中确保:

<FilterInput onChange={this.updatefilters.bind(i)} />

确保首先在构造函数中将 updatefilters 绑定(bind)到 this。