Question

我有一个带有3个输入的应用程序：名称，百分比和密码。另外，我还有一个保存按钮，应该使用输入的值在父组件中更改状态。

使用Ant Desing，我想设置百分比，但无法从AntD的输入编号中获得[e.target.name]。

如何解决此问题，以及当我单击“保存”按钮以更新父组件中的状态时。

代码链接：https://stackblitz.com/edit/react-ytowzg

Answer 1

一些注意点：

处理程序onInputNumber()中的setState
由于该组件已受到完全控制，因此您不需要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 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 });
  }

希望这会有所帮助。

在React Js中设置状态

3 个答案: