在 React Js 中設置狀態

Question

我有一個包含 3 個輸入的應用程序：名稱、百分比和密碼。 另外，我有一個保存按鈕，它應該使用父組件中輸入的值來更改狀態。

使用 Ant Desing，我想設置百分比，但我無法從 AntD 的 Input Number 中獲取[e.target.name] 。

如何解決這個問題，以及當我單擊保存按鈕以更新父組件中的狀態時？。

代碼鏈接： https : //stackblitz.com/edit/react-ytowzg

Answer 1

一些注意點：

• 處理程序中的 setState onInputNumber()
• 由於該組件是完全受控的，因此您不需要defaultValue
• 改為添加value={state.percentage}道具。
• 在save()添加percentage

在線試用： 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 2

您可以從 Antd 輸入的 onchange 傳遞名稱。

 <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 3

在您的保存功能中，您似乎沒有將更新編碼為百分比：

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

希望這可以幫助。