Установить состояние в React Js

Question

У меня есть приложение с 3 входами: имя, процент и пароль. Кроме того, у меня есть кнопка сохранения, которая должна изменить состояние, используя значения из входных данных, в родительском компоненте.

Используя Ant Desing, я хочу установить процент, но не могу получить [e.target.name] из входного номера из AntD.

Как решить эту проблему, и когда я нажимаю кнопку сохранения, чтобы обновить состояние в родительском компоненте?.

код ссылки: https://stackblitz.com/edit/react-ytowzg

Answer 1

Вы можете передать имя из обмена ввода Antd.

 <InputNumber
      defaultValue={100}
      min={0}
      max={100}
      formatter={value => `${value}%`}
      parser={value => value.replace('%', '')}
      onChange={(value) => onInputNumber('myinput', value)}
    />


function onInputNumber(name, value) {
    console.log('changed', value, name);
  }

Answer 2

Некоторые замечания:

• setState внутри обработчика onInputNumber()
• , поскольку компонент полностью контролируется, вам не нужно defaultValue
• добавить value={state.percentage} реквизит вместо.
• добавить percentage внутри save()

Попробуйте онлайн: https://stackblitz.com/edit/react-5qrwcq

const Test = ({ user, setUser }) => {
  const [state, setState] = useState({ name: "", password: "", percentage: "1" });

  function onChange(e) {
    setState({
      ...state,
      [e.target.name]: e.target.value
    });
    console.log(state)

  }
  function onInputNumber(value) {
    setState({...state, percentage: value})
    console.log('changed', value);
  }

  function save() {
    setUser({ ...user, name: state.name, password: state.password, percentage: state.percentage });
  }

  return (
    <div>
      <input name='name' onChange={onChange} />
      <input name='password' onChange={onChange} />
      <InputNumber
      // defaultValue={100}
      min={0}
      max={100}
      value={state.percentage}
      formatter={value => `${value}%`}
      parser={value => value.replace('%', '')}
      onChange={onInputNumber}
    />
      <button onClick={save}>save</button>
    </div>
  );
};

Answer 3

В вашей функции сохранения кажется, что вы не закодировали обновление в процентах:

function save() {
    setUser({ ...user, name: state.name, password: state.password });
  }

Надеюсь, это поможет.