React setState inside onChange function doesn't update input values-CodePudding

function ProjectsComponent() {
  const [state, setState] = useState({ one: 1, two: 2 });

  const handleChange = (e) => {
    setState({ ...state, two: state.one   5 });
    console.log(state);
  };

  return (
    <form>
      <input defaultValue={state.one} onChange={handleChange} />
      <input defaultValue={state.two} />
    </form>
  );
}

When the first input changes, function handleChange is triggered, which changes the state of key two from 2 to 5 1 which is 6, but the second input default value defaultValue = {state.two} is still 2, how to update its value?

CodePudding user response：

The purpose of the defaultValue prop is to set the initial value only. After the first render, the prop has no effect. By using the input in this way, you have an "uncontrolled" input. Typing into the input will update it, but you have no way other than that to set its value.

If you need to change the value externally, then you need to use a "controlled" component, which means you need to use value instead of defaultValue:

function ProjectsComponent() {
  const [state, setState] = useState({ one: 1, two: 2 });

  const handleChange = (e) => {
    setState({ ...state, two: 1   5 });
  };

  const handleChangeTwo = (e) => {
    // I'm guessing this is what you want if input 2 is typed in
    setState({ ...state, two: e.target.value });
  }

  return (
    <form>
      <input value={state.one} onChange={handleChange} />
      <input value={state.two} onChange={handleChangeTwo} />
    </form>
  );
}

More info on controlled and uncontrolled components:

https://reactjs.org/docs/forms.html#controlled-components https://reactjs.org/docs/uncontrolled-components.html

CodePudding user response：

write your console.log() out of the handleChange, you will see that it changes the state

const handleChange = (e) => {
setState({ ...state, two: 1   5 });
};

console.log(state);

CodePudding user response：

Just replace prop defaultValue with value in both the Input components.

like this: `

<input value={state.one} onChange={handleChange} />
<input value={state.two} />

*Note: defaultValue prop is to set the initial value only, unlike value which sets the value of the component for each rerender.