props.onChange(e.target.value)在material中返回对象而不是textField中的值

Question

  function FormInput(props) {
    const classes = formInputStyles();
    return (
      <div>
        <TextField
        onChange={(e) => props.onChange(e.target.value)}
          InputProps={{ classes, disableUnderline: true }}
          {...props}
        />
      </div>
    );
  }

当尝试将(e.target.value)传递给组件时，它返回一个对象

input.MuiInputBase-input.MuiFilledInput-input，对象{ _reactName："onChange"，_targetInst: null，键入：“更改”，nativeEvent:输入，目标： currentTarget: input.MuiInputBase-input.MuiFilledInput-input，eventPhase: 3，气泡: true，可取消: false，timeStamp: 1398131，…}

<FormInput
    onChange={(value) => {
    console.log(value);
    }}
    label="Username"
    variant="filled"
></FormInput>

但是当我试图提醒这个值时，它写着“对象对象”

Answer 1

看起来，onChange道具在TextField中被props.onChange覆盖。这是：

<TextField
  onChange={(e) => props.onChange(e.target.value)}
  InputProps={{ classes, disableUnderline: true }}
  {...props}
/>

可翻译为：

<TextField
  onChange={(e) => props.onChange(e.target.value)}
  InputProps={{ classes, disableUnderline: true }}
  {...}
  // because you're spreading all props. props.onChange receives e (object)
  // instead of e.target.value
  onChange={props.onChange}
/>

解决方案是提取onChange道具，然后按如下所示展开其余部分：

function FormInput({ onChange, ...rest }) {
  const classes = formInputStyles();

  return (
    <div>
       <TextField
         onChange={(e) => onChange(e.target.value)}
         InputProps={{ classes, disableUnderline: true }}
         {...rest}
       />
    </div>
  );
}