Redux 表单 - Return 当前输入值作为字符串 onChange

Question

当输入至少包含 1 个字符以显示必填字段有效时，我试图在输入旁边显示 'tick'。我遇到的问题是，目前当我 console.log(textEntered) 每次字段更改时，我都会收到一个包含所有键入字母而不是完整字符串的对象。例如，如果我输入 'hello'，日志看起来是这样的（忽略未定义的）：

这是我的 Redux 字段组件：

handleInput = (textEntered) => {
  console.log(textEntered);
  this.setState({ textEntered }, () => {
    if (this.state.textEntered.length) {
      this.setState({ completed: true });
    } else {
      this.setState({ completed: false });
    }
  });
}

render() {
  return (
    <Field
      name={this.props.placeholderText}
      component={TextInput}
      onChange={this.handleInput}
    />
  );
}

const TextInput = (field) => {
  return (
    <div className="drill-creation-input">
      <input
        {...field.input}
        type="input"
        onChange={e => field.input.onChange(e.target.value)}
      />

      <label htmlFor={field.input.name}>
        <span>{field.input.name}</span>
      </label>
    </div>
  );
};

Answer 1

OnChange 处理程序具有以下签名（参见 docs）

onChange : (event, newValue, previousValue)

所以要读取完整的值，只需像这样定义您的 handleInput：

handleInput = (evnt, textEntered) => {
  console.log(textEntered);
  ...
}

Redux 表单 - Return 当前输入值作为字符串 onChange

Redux Form - Return current input value as string onChange

reactjs

redux-form