Question

我需要从定制组件到屏幕获取数据。首先，我将数据传递到此组件：

<SearchInputComponent dataFromParent={this.state.text} />

这是我组件的代码：

class SearchInputComponent extends Component {
  clearText = () => {
    this._textInput.setNativeProps({ text: '' });
  };

  render() {
    return (
      <View style={{ flex: 1, flexDirection: 'row' }}>
        <Input
          ref={component => this._textInput = component}
          placeholder="Enter city"
          value={this.props.dataFromParent}
        />
        <Button
          buttonStyle={{ width: 40, height: 40, backgroundColor: 'red' }}
          onPress={this.clearText}
          icon={(
            <MaterialIcons
              name="delete"
              size={30}
              color="black"
            />
          )}
        />
      </View>
    );
  }
}

export default SearchInputComponent;

据我了解，数据是从状态传递的，如果我更改组件中的数据，状态也会更改。还是我错了？但是，当我尝试输入文本以输入该组件时，它会立即清除。我需要在单击按钮后获取文本（例如，类似屏幕上的此方法）：

onPressSearch = () => {
      Alert.alert(this.state.cityName);
    };

那么，你能帮我吗？

UPD

class SearchInputComponent extends Component {
  clearText = () => {
    this._textInput.setNativeProps({ text: '' });
  };

  render() {
    return (
      <View style={{ flex: 1, flexDirection: 'row' }}>
        <Input
          ref={component => this._textInput = component}
          placeholder="Enter city"
          onChangeText={this.props.onInputChange}
          value={this.props.dataFromParent}
        />
        <Button
          buttonStyle={{ width: 40, height: 40, backgroundColor: 'red' }}
          onPress={this.clearText}
          icon={(
            <MaterialIcons
              name="delete"
              size={30}
              color="black"
            />
          )}
        />
      </View>
    );
  }
}

export default SearchInputComponent;

Answer 1

您应该在SearchInputComponent组件中添加一个新的prop，以onInputChange为例，该prop将接受一个函数。然后，就像使用<input/>一样，将该道具传递给dataFromParent组件。

组件：

class SearchInputComponent extends Component {
  ...
  render() {
    return (
      <Input
        onChangeText={this.props.onInputChange}
        ...
      />
      <Button
        onPress={this.props.onClearPress}
        ...
      />
      ...
    );
  }
}

父母：

<SearchInputComponent
  dataFromParent={this.state.value}
  onInputChange={value => this.setState({ value })}
  onClearPress={() => this.setState({ value: '' })}
/>

现在，您可以像这样this.state.value从父状态访问输入值。

编辑： 不建议使用ref来获取或更新<Input />的值（我假设您来自Android / iOS原生开发，我们从视图中获取引用并直接对其进行更新）。相反，您应该像这样dataFromParent清除this.setState({ value: "" });，这将自动清除您的<Input />。我更新了上面的代码。

如何从自定义组件的输入中获取文本

1 个答案: