时间戳

首页 > 解决方案 > 将复选框列表值从子级传递给父级

reactjs - 将复选框列表值从子级传递给父级

问题描述

我正在创建带有复选框的搜索表单并调用 api URL。我需要建议如何将选定的复选框值从子组件传递回父组件并更新选定的值字符串状态。谢谢。

//CheckboxTest.js
import React,{Component} from 'react';


const data=[
   {checked:false, value:'location A'},
   {checked:false, value:'location B'}
   ];

   class CheckboxTest extends Component{
   state={items:[]};

   onCheckChange=(idx)=>{
       const items = this.state.items.concat();
           items[idx].checked = !items[idx].checked;
           this.setState({items});
           this.props.onChange(this.state.items);
   };
   render(){
       return (
         <div>{data.map(item=>(<div>
           <input type="checkbox" checked={item.checked} onChange= {item.onCheckChange} />
           { item.value }
       </div>))}</div>


       );
   }
   }
   export default CheckboxTest;

//App.js

   import CheckboxTest from './CheckboxTest';

   class App extends Component  {

   state={
   items:[],
   itemchecked

   };
   componentDidMount(){
    //call api
    this.runSearch({items});

   }

   //handle checkbox changes
   handleChange(id) {
   //how to set items state here ???

   this.runSearch(id);
   }
   render(){
     return (
     <div className="App">
      <form>

     <CheckboxTest onChange={this.handleChange} checked={this.itemchecked} />

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

   export default App;

标签： reactjs

解决方案

在 React 中有一种单向数据流。所有数据都从父母流向孩子。因此，父母必须拥有该功能（就像您使用handleChange-function所做的那样），而孩子必须运行该功能。这最后一部分你还没有完成。

您需要使用孩子的道具来访问您从父母传下来的功能。在这里阅读更多：

https://reactjs.org/docs/faq-functions.html

推荐阅读