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

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 组件添加一个新的道具，例如调用它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 开发，我们从视图中获取引用并直接更新它）。相反，您应该像这样this.setState({ value: "" }); 清除dataFromParent，这将自动清除您的<Input />。我更新了上面的代码。