选择组件的inputProps(材料UI) [英] Select Component's inputProps (Material UI)

问题描述

在此问题之后，我想替换TextField(以输入age)组件以使用Select组件，因为我注意到两者都具有inputProps属性.

Following this question, I would like to replace the TextField (to input the age) component to use a Select component since I notice both have the inputProps property.

原始应用:

function App() {
  const [state, setState] = React.useState({
    cats: [{ name: "cat1", age: "2" }, { name: "cat2", age: "5" }],
    owner: "Owner's Name"
  });
  const handleFormChange = e => {
    if (["name", "age"].includes(e.target.dataset.fieldType)) {
      const newCats = [...state.cats];
      newCats[e.target.dataset.id][e.target.dataset.fieldType] = e.target.value;
      setState({ ...state, cats: newCats });
    } else {
      setState({ ...state, [e.target.name]: e.target.value });
    }
  };
  return (
    <form onChange={handleFormChange}>
      <TextField label="Owner" value={state.owner} name="owner" />
      <br />
      <br />
      <TextField
        label="Name 1"
        value={state.cats[0].name}
        inputProps={{ "data-id": 0, "data-field-type": "name" }}
      />
      <TextField  <-----------------------replace with a Select
        label="Age 1"
        value={state.cats[0].age}
        inputProps={{ "data-id": 0, "data-field-type": "age" }}
      />
    </form>
  );
}

我将替换第二个TextField的Select组件:

The Select component I'm replace the second TextField:

    <Select
      onChange={handleSelectChange}
      label={"Age 1"}
      value={state.cats[0].age}
      inputProps={{
        "data-id": idx,
        "data-field-type": "age",
        name: "customName"
      }}
    >
      <MenuItem value={10}>Ten</MenuItem>
      <MenuItem value={20}>Twenty</MenuItem>
      <MenuItem value={30}>Thirty</MenuItem>
    </Select>

但是在我的handleSelectChange函数中:

But in my handleSelectChange function:

 const handleSelectChange = e => {
    console.log("value", e.target.value); //OK
    console.log("name", e.target.name); // OK
    console.log("dataset", e.target.dataset); //undefined
  };

传递给inputProps的数据属性是不确定的，为什么?

The data attributes passed to the inputProps are undefined, why is that?

这是我测试此行为的codeandbox: https ://codesandbox.io/s/dynamic-form-change-handler-with-select-ft4dj

This is a codesandbox I made testing this behaviour: https://codesandbox.io/s/dynamic-form-change-handler-with-select-ft4dj

推荐答案

对于Material-UI的Select，触发onChange的事件实际上是单击MenuItem的事件.这是

For Material-UI's Select, the event that triggers the onChange is actually a click on a MenuItem. Here is a slightly simplified (ignoring the multiple case) version of that code:

  const handleItemClick = child => event => {
    update(false, event);

    if (onChange) {
      const newValue = child.props.value;

      event.persist();
      event.target = { value: newValue, name };
      onChange(event, child);
    }
  };

请注意，此处将事件目标明确创建为仅具有value和name属性的对象.原始的点击事件目标通常不会有所帮助，因为它不会对应于表示Select的一致DOM元素，而是某个被点击的特定MenuItem内的某些DOM元素.

Notice that the event target is explicitly created here as an object with only value and name properties. The original click event target would not generally be helpful since it wouldn't correspond to a consistent DOM element representing the Select, but would instead be some DOM element within the particular MenuItem that was clicked.

在回答您先前的问题时，我避免开始讨论本教程中的方法是否是一种好的方法，因为我想避免涉及更多基于观点的方面.但是，这种情况迫使讨论.通常，在React中，我认为最好避免在DOM中放入多余的内容，以便事件处理程序可以拉回信息.而是直接向事件处理程序提供信息.

When answering your previous question, I avoided starting a discussion about whether the approach in the tutorial is a good one since I wanted to avoid getting into more opinion-based aspects; however, this scenario forces the discussion. In general, in React I think it is best to avoid putting extra stuff in the DOM so that event handlers can pull the information back out. Instead, just provide the event handler directly with the information.

例如，您可能拥有:

  const handleSelectChange = (index, fieldType) => e => {
    console.log("value", e.target.value);
    console.log("name", e.target.name);
    console.log("index", index);
    console.log("fieldType", fieldType);
  };
// then later in the JSX:

            <Select
              onChange={handleSelectChange(idx, "age")}
              label={`Cat ${idx + 1} age`}
              value={state.cats[idx].age}
              inputProps={{
                name: "customName"
              }}
            >
              <MenuItem value={10}>Ten</MenuItem>
              <MenuItem value={20}>Twenty</MenuItem>
              <MenuItem value={30}>Thirty</MenuItem>
            </Select>

在上面的代码片段中，将索引和字段类型传递给handleSelectChange以返回一个更改处理程序，该处理程序知道该信息，而不必成为DOM的一部分.

In the code snippet above, the index and field type are passed to handleSelectChange to return a change handler that knows that information without it ever needing to be part of the DOM.

这是您的沙盒的修改版本，其工作原理如下: https://codesandbox.io/s/dynamic-form-change-handler-with-select-1sihp

Here's a modified version of your sandbox with this working: https://codesandbox.io/s/dynamic-form-change-handler-with-select-1sihp

同样的方法也可以用于文本输入.

This same approach could also be used for the text inputs.

这篇关于选择组件的inputProps(材料UI)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！