Question

我在考虑是否需要传递textfield / dropdown的处理程序。

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 组件上有效，但在select组件中不会触发处理程序

顺便说一句，我使用Material UI

Answer 1

我认为您应该使用“选择”组件来使其工作。示例：

<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

在父级中尝试此操作：

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

知道了！尝试使用console.log（event）并看到事件类型。这是一个 click 事件，因此我放置了 onClick 处理程序，它可以正常工作！：D

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

3 个答案: