javascript - 如何映射 SetState 函数？

Question

如何映射 setState 函数？

这是我的 setState 函数示例：

const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');

这是我的映射技术：

  {[{ label: "First Name", state: 'firstName' , function: 'setFirstName'},
                  { label: "Last Name", state: 'lastName' },
                  { label: "Email", state: 'email' },
                  { label: "Password", state: 'password' },
                  { label: "Phone", state: 'phone' }].map((item, index) => (
                    <div>
                      <TextField
                        id="outlined-basic"
                        key={index}
                        label={item.label}
                        variant="outlined"
                        onChange= {e => setFirstName(e.target.value)}          
                      />
                      <br></br><br></br>
                    </div>
                  )
  )}

这可行，但我想改变 onChange 的方式，而不是 setFirstName，我可以传入函数并映射所有这些（例如 firstName、lastName 等）。我该如何解决这个问题？

标签： javascriptreactjstypescriptmappingmaterial-ui

Answer 1

只需删除 and 的引号state并function使用functioninside onChange。

    [
      { label: 'first name', state: firstName, function: setFirstName },
      { label: 'last name', state: lastName, function: setLastName },
    ].map((item, index) => (
      <TextField
        key={index}
        label={item.label}
        onChange={e => item.function(e.target.value)} // use state function       
      />
    ))