Question

您好，我只想创建一个表单，并且我的文本框不接受我的输入，我的提交也起作用，但是不发送任何值。我究竟做错了什么？我知道这是一个基本问题，但是我不知道代码中的问题是什么。

关键问题：

它不会更新状态，也不会接受我的输入。
字段可编辑但无法写入

代码

import React, { Component } from "react";

class Postform extends Component {
  constructor(props) {
    super(props);

    this.state = {
      name: "",
      category: "",
      price: "",
    };
  }

  changeHandler = (e) => {
    this.setState = { [e.target.name]: e.target.value }; 
  };

  submitHandler = (e) => {
    e.preventDefault();
    console.log(this.state);
  };

  render() {
  
    const { name, category, price } = this.state;

    return (
      <div>
        <form onSubmit={this.submitHandler}>
          <div>
            <input
              type="text"
              name="name"
              placeholder="Name"
              value={name}
              onChange={this.changeHandler}
            />

            <input
              type="text"
              name="category"
              placeholder="Category"
              value={category}
              onChange={this.changeHandler}
            />

            <input
              type="text"
              name="price"
              placeholder="Price"
              value={price}
              onChange={this.changeHandler}
            />
          </div>
          <button type="submit">Add product</button>
        </form>
      </div>
    );
  }
}

export default Postform;

Answer 1

将此行更改为

changeHandler = e => {
    this.setState({[e.target.name]: e.target.value });
  };

由于setState是一个函数，因此它不是属性！

基本形式反应

1 个答案: