时间戳

首页 > 解决方案 > 基本形式反应

reactjs - 基本形式反应

问题描述

您好，我只想制作一个表格，我的文本框不接受我的输入，我的提交工作但不发送任何值。我究竟做错了什么？我知道这是一个基本问题，但我不知道我的代码中有什么问题。

关键问题：

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

代码

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;

标签： reactjsforms

解决方案

将此行更改为

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

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

推荐阅读