Question

我正在尝试从我的搜索栏组件传递数据，该组件将API调用中的JSON返回到另一个将显示信息的组件。我在搞清楚方面遇到了很多麻烦。我尝试制作一个容纳两个组件并传递数据的容器。任何帮助将不胜感激。

谢谢！

我的搜索栏组件

String

显示

的组件

class SearchBar extends Component {
constructor(props){
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(e){
    e.preventDefault();
    let reqBody = {
      name: this.refs.name.value
    };
    fetch("/api", {
      method: "POST",
      body: JSON.stringify(reqBody),
      headers: {"Content-Type": "application/json"}
    })
      .then((res) => {
        if (res.ok){
          return res.json();
        } else {
          throw new Error ('Something went wrong');
        }
      }).then((json) => {
        console.log(json)
        this.props.onDataFetched(json)
      })
  }


  render() {
    return (
  <div >
    <form onSubmit={this.handleSubmit}>
    <input placeholder = "Enter Name" type="text" ref = "name"/>
    <button type ="Submit"> Search</button>

    </form>
  </div>
    );
  }
}

我的容器组件

class History extends Component {
    render() {
    return (
      <div >
        <h2> History</h2>


         <ul>
          <li>
          //display data here 

          </li>


         </ul>



      </div>
    );
  }
}

Answer 1

您可以在自己的搜索组件中处理表单提交。将搜索值（输入值）传递给容器组件。

class SearchBar extends React.Component {
constructor(props){
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
}

handleSubmit(e){
    e.preventDefault();
    let reqBody = {
      name: this.refs.name.value
    };

    console.log(reqBody);
    this.props.onDataFetched(reqBody);
}


  render() {
    return (
  <div >
    <form onSubmit={this.handleSubmit}>
    <input placeholder = "Enter Name" type="text" ref = "name"/>
    <button type ="Submit"> Search</button>

    </form>
  </div>
    );
  }
}

class Container extends React.Component {
    constructor(props){
        super(props);
        this.state ={
            history : []
        }
      this.handleChange = this.handleChange.bind(this)
    }

    handleChange(searchValue){
        console.log(searchValue);
    }

  render() {
    return (
      <div >
        <SearchBar onDataFetched={this.handleChange} />
      </div>
    );
  }
}
ReactDOM.render(<Container />, mountNode )

现在说这样做的理想方法是使用redux和redux形式。

https://redux.js.org/

https://redux-form.com/

这将有助于您将来节省大量时间，因为您将拥有正确的结构。

React：如何从一个组件获取API数据并将其传递给另一个组件

1 个答案: