输入组件：React 无法识别 DOM 元素上的道具

Question

当我尝试在输入字段中设置组件的状态时，我遇到了一个问题。我曾尝试在构造函数中设置 Object 值，但这也不起作用。如果我删除道具，则输入字段不会获得任何值。我已经在下面发布了我的 JS 代码。

输入组件：

            <div className="form__group">
              <input
                className="form__field"
                id={props.name}
                name={props.name}
                type={props.inputtype}
                value={props.value}
                onChange={props.handleChange}
                placeholder={props.placeholder}
                {...props}
              />
              <label htmlFor={props.name} className="form__label">{props.placeholder}</label>
            </div>

JSX代码：

          <Input
            inputtype={"text"}
            title={"Full Name : "}
            name={"name"}
            value={this.state.newUser.name}
            handleChange={this.handleInput}
            placeholder={"Enter your Name"}
          />{" "}

JS代码：

class FormContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      newUser: {
        name: "",
        age: "",
        gender: "",
        skills: [],
        about: ""
      },
this.handleInput = this.handleInput.bind(this);
}
  handleInput(e) {
    let value = e.target.value;
    let name = e.target.name;
    this.setState(
      prevState => ({
        newUser: {
          ...prevState.newUser,
          [name]: value
        }
      }),
      () => console.log(this.state.newUser)
    );
  }
}

Answer 1

handleChange 是因为 传递的{...props}，并且对于输入元素无效。

如果将参数中的道具展开：

const Input = ({ name, inputType, value, handleChange, placeholder, ...props}) => {

进而

<input
              className="form__field"
              id={name}
              name={name}
              type={inputType}
              value={value}
              onChange={handleChange}
              placeholder={placeholder}
              {...props}
/>