Question

我正在创建带有复选框的搜索表单，并调用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;

Answer 1

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

您需要使用子代的道具来访问从父代传下来的功能。在此处阅读更多信息：

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

将复选框列表值从子级传递到父级

1 个答案: