Нужно ли передавать реквизиты обработчика дочернему компоненту?

Question

Я думал, если мне нужно передать обработчик текстового поля / выпадающего списка.

const initialFormFields = {
  name: '',
  sample_select: '',
}

const [formFields, setFormFields] = useState(initialFormFields);

Родительский компонент

  const handleInputChange = event => {
    event.persist();
    const target = event.target;
    const value = target.type === "checkbox"
      ? target.checked
      : target.value;
    setFormFields(formFields => ({...formFields,[target.name]: value}));
  };

<form onChange={handleInputChange}>
  <ChildComponent 
    name={formFields.name}
    sample_select={formFields.sample_select}
  />
</form>

Дочерний компонент

<TextField
  name="name"
  id="name"
  value={props.name}
/>

<TextField
  select
  id="sample_select"
  name="sample_select"
  value={props.sample_select}
>
  <MenuItem value="1">1</MenuItem>
  <MenuItem value="2">2</MenuItem>
  <MenuItem value="3">3</MenuItem>
</TextField>

Вкл. TextField Компонент работает, но в выбранном компоненте он не вызывает обработчик

Кстати, используя Material UI

Answer 1

попробуйте это в родительском:

<form onChange={handleInputChange}>
  <ChildComponent 
    name={formFields.name}
    sample_select={formFields.sample_select}
    handleInputChange={handleInputChange}
  />
</form>

в ChildComponent:

<TextField
  name="name"
  id="name"
  value={props.name}
  onChange={props.handleInputChange} 
/>

<TextField
  select
  id="sample_select"
  name="sample_select"
  value={props.sample_select}
  onChange={props.handleInputChange} 
>
  <MenuItem value="1">1</MenuItem>
  <MenuItem value="2">2</MenuItem>
  <MenuItem value="3">3</MenuItem>
</TextField>

Answer 2

Понял! Пробовал в console.log (событие) и видел тип события. Это событие click , поэтому я установил обработчик onClick , и он работает! : D

Answer 3

Я думаю, вы должны использовать вместо этого компонент «Выбрать», чтобы он работал. Пример:

<Select
  value={props.sample_select}
  onChange={handleInputChange}
  >
  <MenuItem value={10}>Ten</MenuItem>
  <MenuItem value={20}>Twenty</MenuItem>
  <MenuItem value={30}>Thirty</MenuItem>
</Select>