Reactjs 中的重新渲染状态未按预期工作

Question

我在 React 中有一个父组件，它保存应用程序的状态（我正在构建一个可过滤的表）。在我有一些输入收集的过滤器的状态下，状态看起来像这样filters: [{"filter1": "value1"}, {"filter2": "value2"}, { }, { }, ...]。过滤器输入构建在子组件FilterBar 中，该子组件接收过滤器数组作为属性<FilterBar filters={this.state.filters}/>。
因此，当用户在输入字段中写入内容时，它会根据字段名称和新输入值更新过滤器（父）的状态。到目前为止，一切都按我的预期工作。但是现在我想实现一个按钮来清理过滤器，所以当用户点击它时，过滤器的状态变为空（每个过滤器值的“”字符串）。我成功了，当我单击按钮时，它按预期设置状态，并且表格按我想要的方式更新。但我犯了一些错误，输入字段接收新的过滤器数组属性，但它不清理输入文本（所以如果我在输入文本中有一个单词或字母，它在重新渲染后仍然存在，我想要输入为空作为状态）。
这是清理过滤器的父函数（我意识到它按预期工作）：

cleanFilters() {
    let filters = this.state.filters.slice();
    let f;
    for (f in filters) {
        filters[f]['value']="";
    }
    this.setState({filters: filters}, function(){this.updateData();});
  }

这是在 FilterBar 组件上呈现文本输入的函数：

renderFilterInputs() {
    var filters = [];
    for (let i=0; i < this.props.totalFilters; i++) {
        filters.push(<td key={i}><input type='text' className="form-control" defaultValue={this.props.filtersApplied[i].value} onChange={(evt) => this.handleFilterChange(evt, i)} /></td>);
    }
    return filters;
}

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

我不明白为什么当我单击按钮时文本输入仍会保存文本，因为它会再次重新呈现并且过滤器状态为空，因此该输入的 defaultValue 应该为 ("") 空。谢谢你

Answer 1

因为您使用的是 defaultValue 而不是 value 表示 uncontrolled component。默认值只会将初始值（默认值）分配给输入元素，它不会更新值。

解决方案：

由于您对输入元素使用 onChange 函数并更新父状态，因此请使用 controlled 输入字段，使用 value 属性而不是 defaultValue。

value = {this.props.filtersApplied[i].value}