如何重置作为自定义组件制作的 TextInput？答案

【问题标题】：How do I reset TextInput that is made as custom component?如何重置作为自定义组件制作的 TextInput？
【发布时间】：2019-07-03 14:01:09
【问题描述】：

大家好，我有一个 TextInput 的自定义组件，在我提交表单后，我想重置该字段，但似乎没有做任何更改。

这是在我的渲染中导入的组件；

<InputField
    customStyle={{ marginBottom: 30, marginTop: 20 }}
    textColor={colors.black}
    labelText="JOB TITLE"
    labelTextSize={14}
    labelColor={colors.black}
    borderBottomColor={borderColor}
    inputType="text"
    multiline={true}
    onChangeText={this.handleNameChange}
    showCheckmark={validName}
/>

现在onChangeText函数与此相关

handleNameChange(name) {
    const { validName } = this.state;
    this.setState({ name });
    if (!validName) {
      if (name.length >= 10) {
        this.setState({ validName: true });
      }
    } else if (name.length < 10) {
      this.setState({ validName: false });
    }
  }

这是我实际的 TextInput 实现

onChangeText(text) {
   this.props.onChangeText(text);
   this.setState({ inputValue: text });
}

<TextInput
      style={[
        { color: inputColor, borderBottomColor: borderBottom },
        inputStyle,
        styles.inputField
      ]}
      secureTextEntry={secureInput}
      onChangeText={this.onChangeText}
      keyboardType={keyboardType}
      autoFocus={autoFocus}
      autoCorrect={false}
      underlineColorAndroid="transparent"
      placeholder={placeholder}
      defaultValue={inputValue}
      value={inputValue}
      editable={editable}
      multiline={multiline}
    />

所以我想在提交表单时重置字段。我已经通过setState({name: ""}) 尝试过，它正在改变渲染中的状态，但不是来自名为 inputValue 的组件

【问题讨论】：

TextInput 的值在 value props 中对吗？所以如果你想重置 TextInput 的值，你需要 setState({value:""})，而不是 setState({name:" "})。

标签： reactjs react-native

【解决方案1】：

它将保持不变，因为值的状态不会自动清除。您需要对 TextInput 的值使用 setState。所以像 this.setState({ inputValue: '' }) 这样的东西应该可以工作。

【讨论】：