Question

我创建了自己的帖子网络应用程序，您可以在其中添加，删除和更新帖子。现在，当我尝试添加帖子并传递输入值时，抛出一个函数，然后执行“ setState”，我得到一个错误，这是我做错的方式。你能帮忙吗？

我可以从状态中删除根对象（“ post”），然后仅使用标题，正文作为自己。但我想这样构造它：Post：{title，body}

import React, { Component } from 'react';
export class addPost extends Component {
  state = {
    post: {
      title: '',
      body: ''
    }
  };
  handleChange = e => {
    this.setState({ post[e.currentTarget.id]: e.currentTarget.value });
    console.log(this.state);
  };
  handleSubmit = () => {};
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          Enter title:
          <input
            type="text"
            value={this.state.title}
            onChange={this.handleChange}
            id="title"
          />
          Enter body:
          <input
            type="text"
            value={this.state.body}
            onChange={this.handleChange}
            id="body"
          />
        </form>
      </div>
    );
  }
}
export default addPost;

我希望通过此对象发布：{title：'sometext'，body：'sometext'}

Answer 1

您需要在两个地方修复

您要设置状态的地方
您正在访问输入中的状态

handleChange = e => {
    this.setState(prevState => ({
      post: { ...prevState.post, [e.target.id]: e.target.value }
    }));
  };
  
  
  <input value={this.state.post.title />
  <input value={this.state.post.body} />

Answer 2

为您制作了一个沙箱：https://codesandbox.io/s/p2w7765j0

大多数约定是将name属性用于输入，并使用event.target.name

映射它们

import React, { Component } from "react";

class AddPost extends Component {
  state = {
    post: {
      title: "",
      body: ""
    }
  };

  handleChange = event => {
    this.setState(
      {
        post: {
          ...this.state.post,
          [event.target.name]: event.target.value
        }
      },
      () => console.log(this.state)
    );
  };

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          Enter title:
          <input
            type="text"
            value={this.state.post.title}
            onChange={this.handleChange}
            name="title"
          />
          Enter body:
          <input
            type="text"
            value={this.state.post.body}
            onChange={this.handleChange}
            name="body"
          />
        </form>
      </div>
    );
  }
}
export default AddPost;

将对象传递给setState失败

2 个答案: