Question

我想过滤我的数据列表，但我想保持我的过滤器布局分开以避免有数千行代码......如何将过滤器选项发送回主视图？

我知道我可以向<Filter />组件添加参数，但我需要找到一种方法将它们发送回主屏幕。

想象一下我的main.js屏幕看起来像这样：

<View>
  <ListView dataSource={this.state.dataSource} renderRow={this.renderListItem}></ListView>
  <Filter />
</View>

filter.js屏幕：

<View>
  <Input>filter text here</Input>
</View>

注意：这是最小化版本

Answer 1

从Thinking in React获取概念，这就是你应该做的：

class MyComponent extends Component {

  state = {
    filter1: '',
    filter2: '',
    // Other stuff
  };

  handleFilter1Change = (filterText) => {
    // Update filter1 and dataSource
  };

  handleFilter2Change = (filterText) => {
    // Update filter2 and dataSource
  };

  render() {
    return (
      <View>
        <ListView dataSource={this.state.dataSource} renderRow={this.renderListItem}></ListView>
        <Filter
          filter1Value={this.state.filter1}
          filter2Value={this.state.filter2}
          onFilter1Change={this.handleFilter1Change}
          onFilter2Change={this.handleFilter2Change}  />
      </View>
    );
  }
}

const Filter = ({ filter1, filter2, onFilter1Change, onFilter2Change }) => {
  return (
    <View>
      <TextInput
        value={filter1}
        onChangeText={onFilter1Change} />
      <TextInput
        value={filter2}
        onChangeText={onFilter2Change} />
    </View>
  );
}

基本上，经验法则是向下发送一个父函数，孩子将调用它，并将数据传递给它。

以本机方式从组件发回数据

1 个答案: