Входной компонент: React не распознает опору в элементе DOM

Question

У меня возникает проблема, когда я пытаюсь установить состояние компонента в поле ввода. Я попытался, установив значения объекта в конструкторе, но это тоже не сработало. Если я уберу опору, поле ввода не получит никакого значения. Я разместил свой код 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}
/>

Answer 2

На самом деле есть проблема в вашем JSX (handleChange вместо onChange, но это не главное)

Так что в моем примере ваш окончательный код должен выглядеть следующим образом

handleInput = (input) => {
  this.setState({ newUser: { [input.target.name]: input.target.value } });
}

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