Question

从子组件我想在父组件中传递一些数据。并且基于数据还要更新父组件的状态。我尝试过以下方式。但每次我更改输入字段时，都会调用updatedPostHandler（）。应该只在按钮点击时调用它。

父组件：

class Blog extends Component {
state = {
    posts: [],
    selectedPostId: null
};

componentDidMount() {
    axios.get('https://jsonplaceholder.typicode.com/posts')
        .then(response => {
            const posts = response.data.slice(0, 3);
            const updatedPosts = posts.map((post) => {
                return {
                    ...post,
                    author: 'Tanvir'
                }
            });
            this.setState({ posts: updatedPosts })
        });
}

selectedPostHandler = (id) => {
    this.setState({ selectedPostId: id })
};

updatedPostsHandler = (post) => {
    // axios.post('https://jsonplaceholder.typicode.com/posts/', post)
    //     .then(response => {
    //     }
    // );
    console.log(post);

}

render() {
    const posts = this.state.posts.map(
        post => <Post
            key={post.id}
            title={post.title}
            author={post.author}
            clicked={() => this.selectedPostHandler(post.id)} />
    );
    return (
        <div>
            <section className="Posts">
                {posts}
            </section>
            <section>
                <FullPost id={this.state.selectedPostId} />
            </section>
            <section>
                <NewPost
                    newPostCreated={this.updatedPostsHandler} />
            </section>
        </div>
    );
}
}

子组件：

class NewPost extends Component {
state = {
    title: '',
    content: '',
    author: 'Max',
    post: ''
}

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

render() {
    return (
        <div className="NewPost">
            <h1>Add a Post</h1>
            <label>Title</label>
            <input type="text" name="title" value={this.state.title} onChange={this.handleChange} />
            <label>Content</label>
            <textarea rows="4" name="content" value={this.state.content} onChange={this.handleChange} />
            <label>Author</label>
            <select name="author" value={this.state.author} onChange={this.handleChange}>
                <option value="Max">Max</option>
                <option value="Manu">Manu</option>
            </select>
            <button
                onClick={this.props.newPostCreated(this.state.post)}>
                Add Post
            </button>
        </div>

    );
}

}

Answer 1

你需要把它写成：

onClick={() => this.props.newPostCreated(this.state.post)}>

否则，在执行{..}时每次调用render()时，它都会在JSX setState(..)内执行。出于性能原因，更好的是不使用箭头功能方式编写它。

class NewPost extends Component {
  // ..
  onBtnClick = () => {
    this.props.newPostCreated(this.state.post);
  };

  render() {
    return (
      // ..
        <button onClick={this.onBtnClick}>Add Post</button>
      </div>
    );
  }
}

我还发现你的状态结构和handleChange函数有点奇怪和错误。我会写这样的课：

class NewPost extends Component {
  state = {
    post: {
      title: "",
      content: "",
      author: "Max"
    }
  };

  handleChange = ({ target }) => {
    this.setState(prevState => ({
      post: {
        ...prevState.post,
        [target.name]: target.value
      }
    }));
  };

  onBtnClick = () => {
    this.props.newPostCreated(this.state.post);
  };

  render() {
    const { post: { content, title, author } } = this.state;
    return (
      <div className="NewPost">
        <h1>Add a Post</h1>
        <label>Title</label>
        <input
          type="text"
          name="title"
          value={title}
          onChange={this.handleChange}
        />
        <label>Content</label>
        <textarea
          rows="4"
          name="content"
          value={content}
          onChange={this.handleChange}
        />
        <label>Author</label>
        <select
          name="author"
          value={author}
          onChange={this.handleChange}
        >
          <option value="Max">Max</option>
          <option value="Manu">Manu</option>
        </select>
        <button onClick={this.onBtnClick}>Add Post</button>
      </div>
    );
  }
}

Answer 2

您应该将updatedPostsHandler电话作为一项功能添加到您的子组件中。因此，当您单击子组件上的按钮时，它会调用执行函数的函数。

尝试按以下方式添加updatedPostsHandler：

<NewPost newPostCreated={() => this.updatedPostsHandler} />

如何从React中的子组件向父组件发送多个数据作为对象？

2 个答案: