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}而传递的，对于输入元素无效。

如果您在参数中展开道具：

CollectionView

然后

const Input = ({ name, inputType, value, handleChange, 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"
  />

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

2 个答案: