Redux Form - Return current input value as string onChange

Question

I'm trying to show a 'tick' next to my input when it contains at least 1 character to show a required field as being valid. The issue I have is that currently when I console.log(textEntered) each time the field changes I receive an object containing all the typed letters instead of a complete string. If I typed in 'hello' for example the log looks this (ignore the undefined):

Here is my Redux Field Component:

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

Dario · Accepted Answer · 2017-07-28 14:28:54Z

5

OnChange handler has the following signature (see docs)

onChange : (event, newValue, previousValue)

So to read the complete value, just define your handleInput like:

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

answered Jul 28, 2017 at 14:28

Dario

6,3109 gold badges42 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

xeroshogun Over a year ago

I had the same problem and this solved it. Should be the accepted answer

Collectives™ on Stack Overflow

Redux Form - Return current input value as string onChange

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related