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而非值意味着uncontrolled component。默认值仅将初始值（默认值）分配给输入元素，它不会更新值。

<强>解决方案：

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

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

Reactjs中的重新呈现状态未按预期工作

1 个答案: