Как я могу отправить несколько данных в виде объекта на родительский компонент из дочернего компонента в React?

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)}>

В противном случае это выполняется внутри JSX {..} каждый раз render() называется при выполнении 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} />