Question

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

FilterBar
- FilterInput

我希望我的FilterBar能够以这种方式将FilterInput值存储在类状态中==＆gt; this.state = {inputsVal: ["input1value", "input2value", "", ...]}。
我动态地为每个头（我的数据库中的属性）构建一个输入组件。所以当我在其中一个组件中写入时，我想捕获新值和该组件的位置以刷新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合约，你要么将值或事件raw传递给onChange处理程序，而在父程序中确保你有：

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

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

Answer 2

将onChange更改为：

filters.push(<FilterInput key={i} filterApplied={this.state.inputs[i]} onChange={(evt) => this.updateFilters(i, evt)} />);

然后更改updateFilters以获取现在传入的事件的值：

updateFilters(i, evt) {
    const value = evt.target.value;
    ....
}

如何将输入值从子组件传递给父组件

2 个答案: