主页 / 问题 / 1100587
Accepted
Streammer
Asked:2020-03-27 19:23:08 +0000 UTC2020-03-27 19:23:08 +0000 UTC

在父子组件之间传递数据

  • 772

大家好。情况如下。我有两个组件：标题和搜索框。搜索框是一个输入 tupe = "searchbox"，我在其中输入文本信息。Header 组件是 Searchbox 的父组件。那些。我在标题中呈现一个搜索框。我想要在 input 中输入的信息，这些信息将传递给 component 的 state。那些。如果更全局，即站点标题，它有一个输入，您可以在其中输入一些内容，并且此数据应存储在父组件的状态中。这是我的代码。搜索框组件

import React, { Component } from "react";
import "./style.scss";

class Searchbox extends Component {
  constructor(props) {
    super(props);
    this.state = { name: "", requestResult: null };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    event.preventDefault();
    this.setState({ name: event.target.value });
  }

  handleSubmit(event) {
    event.preventDefault();
    // this.setState({ name: "" });
    console.log(this.state.name);
  }

  render() {
    const { requestResult, name } = this.state;
    return (
      <>
        <form
          id="search_movie"
          className="search-movie"
          onSubmit={this.handleSubmit}
        >
          <input
            type="search"
            value={name}
            onChange={this.handleChange}
            requestvalue={requestResult}
          />
        </form>
        <button
          onClick={name => {
            this.props.getData(name);
          }}
        >
          OK
        </button>
      </>
    );
  }
}
export default Searchbox;

标题组件

import React, { Component } from "react";  
import Searchbox from "../Searchbox";
import User from "../User";
import "./style.scss";

class Header extends Component {
  constructor(props) {
    super(props);
    this.state = { name: "" };  
  }

  getData = value => {
    this.setState({ name: value });
    console.log(this.state);
    console.log(value);
  };

  render() {
    return (
      <div className="movie-header">
        <div className="container">
          <div>Movie Catalog</div>
          <Searchbox getData={value => this.getData(value)} />
          <User />
       </div>
      </div>
    );
  }
}

export default Header;

单击“确定”按钮时，应触发 getData(value) 函数，该函数应将 value 值写入 Header 组件的状态。为什么在我的情况下不会发生这种情况？这是原始https://codesandbox.io/s/zealous-villani-u4rsm的链接

reactjs

1 个回答

  1. Best Answer

    问题在于这里处理按钮OK点击的方法：

    onClick={name => {
  this.props.getData(name);
}}

    如果您考虑含义，那么您根本不是在传输name，而是event。也就是说，您需要一个点击处理程序，例如：

    onOkClick = () => {
  const { name } = this.state;
  this.props.getData(name);
};

    在这里，我们从状态中获取输入name并将其提供给getData. 我们将此方法指定为按钮的处理程序OK：

    <button onClick={this.onOkClick}>OK</button>

    此处附有示例代码（基于您的）：

    class Searchbox extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: "" };
    
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  
  handleChange(event) {
    event.preventDefault();
    this.setState({ name: event.target.value });
  }
  
  handleSubmit(event) {
    event.preventDefault();
    // this.setState({ name: "" });
    console.log(this.state.name);
  }
  
  onOkClick = () => {
    const { name } = this.state;
    this.props.getData(name);
  };
  
  render() {
    const { requestResult, name } = this.state;
    return (
      <div>
        <form
          id="search_movie"
          className="search-movie"
          onSubmit={this.handleSubmit}
        >
          <input
            type="search"
            value={name}
            onChange={this.handleChange}
            requestvalue={requestResult}
          />
        </form>
        <button
          onClick={this.onOkClick}
        >
          OK
        </button>
      </div>
    );
  }
}

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: "" };  
  }

  getData = value => {
    this.setState({ name: value });
    console.log(this.state);
    console.log(value);
  };

  render() {
    return (
      <div className="movie-header">
        <div className="container">
          <div>Movie Catalog</div>
          <Searchbox getData={value => this.getData(value)} />
       </div>
      </div>
    );
  }
}

ReactDOM.render(
  <Header />, 
  document.getElementById('app')
)
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!-- The content rendered into this tag should match the content below. -->
<div id="app"></div>

    作为答案的补充，我建议您注意您编写的以下代码：

    getData = value => {
  this.setState({ name: value }); 
  console.log(this.state);
  console.log(value);
};

    由于方法setState队列在组件的状态变化，当你console.log(this.state);在调用后显示值时，setState你不会在结果中看到你的值。将setState()其视为请求，而不是立即更新组件的命令。您可以使用回调作为方法中的第二个参数setState来准确获取状态中的设置值，如下所示：

    getData = value => {
  this.setState({ name: value }, () => { console.log(this.state); }); 
  console.log(value);
};
    • 3

相关问题