Как мне создать событие, которое будет нравиться handleChange Formik? - PullRequest
Новая
       4

Как мне создать событие, которое будет нравиться handleChange Formik?

0 голосов
/ 01 ноября 2019

В сумке Formik предусмотрены обработчики событий, такие как handleBlur, handleChange, для обычных элементов формы мы можем назначить следующее: 

    <input name ="foo" onChange = {handleChange}/>

Если я присмотрюсь к этому событию onChange, как: 

<input value = {values.foo} name="foo" onChange ={(e) => {
    console.log(e); 
    handleChange(e); //Formik still handles it
}}/>

Мы можем видеть, что это React SyntheticEvent , который отправляется на formik.

Вопрос в том, что если я реализовал свой собственный компонент, произнесите что-то вроде: 

const Randomer = (props) => {
    const {onChange, name} = props; 
    const [value, setValue] = useState(Math.random() + ""); 
    return <div> 
         {value}
         <button onClick = {() => setValue(Math.random()+"")}> Click me</button> 
    </div> 
}

И я хочу аналогичным образом позволить Formik быть в курсе изменений, которые вносит этот компонент,Как бы я изменил этот код, чтобы сделать это?

Код Песочница здесь.

Ответы [ 2 ]

0 голосов
/ 01 ноября 2019

Хорошо, я нашел реальный ответ:

  • сумка Formik обеспечивает функцию setFieldValue подписи:

(field: string, value: any, shouldValdidate? :boolean) => void

Вы можете использовать это для ручного подключения наборов полей formik:

например. 

 <Randomer
    onChange={value => setFieldValue("random", value)}
  />
0 голосов
/ 01 ноября 2019

Один из вариантов, и я могу быть не согласен с этим *, заключается в добавлении 'value' и 'name' к кнопке в вашем пользовательском компоненте: 

const Randomer = props => {
  const { onChange, name } = props;
  const [value, setValue] = React.useState(Math.random() + "");
  const handleClick = React.useCallback(
    event => {
      const newValue = Math.random() + "";
      setValue(newValue);
      onChange(event);
    },
    [onChange]
  );
  return (
    <div>
      {value}
      <button
        type="button"
        onClick={handleClick}
        value={value}
        name={name}
        onChange={onChange}
      >
        {" "}
        Click me
      </button>
    </div>
  );
};

Таким образом - вы все еще отправляетеобычное событие формы, у которого есть имя и значение, и Formik с радостью принимает его.

Код Песочница здесь.

* Видимо, лучший способ получить правильный ответ в Интернете, это опубликовать неправильный ответ.

...