在单个 useState 变量中维护多个用户输入答案

【问题标题】：Maintaining multiple user inputs in a single useState variable在单个 useState 变量中维护多个用户输入
【发布时间】：2022-11-24 14:20:11
【问题描述】：

我想将输入到 antd Select 组件中的多个输入信息存储在单个状态变量中，但无法使以下内容正常工作。

此示例已解决here 的表单，但相同的解决方案似乎不适用于 antd Select 组件。有两个输入：我想记住的名字和姓氏。下面的代码不起作用，因为控制台告诉我 e 没有名为 name 的属性。我还尝试了 e.target.name 和 e.target.value 但我得到一个错误，即 e 也没有称为目标的属性。这样做的正确方法是什么？

import React, { useState } from 'react';
import { Select } from 'antd';

const App = () =>{

  const [varState, setVarState] = useState({firstName:'Jack', lastName:'Smith'});
  const firstNameOptions = [ {label:'Jack', value:'Jack'}, {label:'Jill',value:'Jill'}, {label:'Bill',value:'Bill'} ];
  const lastNameOptions = [ {label:'Smith', value:'Smith'}, {label:'Potter',value:'Potter'}, {label:'Bach',value:'Bach'} ];

  const changeState = (e) => {
    setVarState( prevState => ({ ...prevState, [e.name]: e.value}));
    console.log(varState)
  };

  return ( <>
      <div>
        <Select name={'firstName'} defaultValue={'Pick One'} options={firstNameOptions} onChange={changeState}   />
        <Select name={'lastName'} defaultValue={'Pick One'} options={lastNameOptions} onChange={changeState}   />
      </div>
      </>
  );
}

export default App;

在它的核心，我似乎不知道如何以可以将它们的名称传递给 onChange 处理程序的方式命名 Select 组件。
更一般地说，给定一个像 antd Select 这样的组件，我如何才能确定该组件的正确“名称字段”是什么，以便它的值可以传递给 onChange 处理程序？例如，documentation 中的 select 提供了哪些信息？

【问题讨论】：

标签： reactjs react-hooks antd

【解决方案1】：

是的，实际上 antd 没有输入字段的属性 name。 antdesign 直接给出选择的值，我们需要做一些 tweeks 来实现这个。

这是解决方案：

import React, { useState } from 'react';
import { Select } from 'antd';

const firstNameOptions = [ {label:'Jack', value:'Jack'}, {label:'Jill',value:'Jill'}, {label:'Bill',value:'Bill'} ];
const lastNameOptions = [ {label:'Smith', value:'Smith'}, {label:'Potter',value:'Potter'}, {label:'Bach',value:'Bach'} ];

const App = () =>{

  const [varState, setVarState] = useState(null);
      
  const changeState = (fieldName) => (value) => {
    setVarState( prevState => ({ ...prevState, [fieldName]: value}));
    console.log(varState)
  };

  return ( <>
      <div>
        <Select defaultValue={'Pick One'} options={firstNameOptions} onChange={changeState('firstName')}   />
        <Select defaultValue={'Pick One'} options={lastNameOptions} onChange={changeState('lastName')}   />
      </div>
      </>
  );
}

export default App;

我希望这有帮助?

【讨论】：