Как сопоставить функции SetState? - PullRequest
Новая
       31

Как сопоставить функции SetState?

2 голосов
/ 25 февраля 2020

Как я могу отобразить функции 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 et c). Как я мог это исправить?

Ответы [ 2 ]

4 голосов
/ 25 февраля 2020

Просто удалите кавычки для state и function и используйте function внутри 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       
      />
    ))
0 голосов
/ 25 февраля 2020

Я бы использовал объект для отслеживания состояния формы, но вот как я могу отобразить различные действия с установленным состоянием. 

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

const textFields = [
  {
    label: 'First name',
    onChange: handleChange(setFirstName),
    value: firstName
  },
  {
    label: 'Last name',
    onChange: handleChange(setLastName),
    value: lastName
  }
];

const handleChange = setStateAction => ({ target }) => {
  setStateAction(target.value);
}

return textFields.map((props, index) => (
  <TextField key={index} {...props} />
));
...