如何重置作为自定义组件创建的文本输入

Question

大家好，我有一个用于文本输入的自定义组件，提交表单后，我想重置该字段，但似乎没有进行任何更改。

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

<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 });
    }
  }

这是我的实际文本输入实现

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的组件

Answer 1

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