我需要将处理程序道具传递给子组件吗？

Question

I was thinking if I need to pass a handler of textfield/dropdown.

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

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

Parent Component

  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>

Child Component

<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>

On TextField Component it works, but in select component it doesn't trigger the handler

Btw im using Material UI

Answer 1

I think you should use "Select" component instead to make it work. Example:

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

Answer 2

try this in parent:

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

in 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 3

Got It! Tried to console.log(event) and saw type of event. It's a click event, so I put onClick handler and it works! :D