将功能状态从子组件导出到父组件

Question

我是 React+Redux 的初学者，并且有 table 的代码。 table 的映射如下：-

ListTemp.js

//editTemp function invoked in the mapping below

 editTemp = (e, temp_id, temp_name, action_url, duration) => {
        e.preventDefault();

        this.props.getTemp(temp_id)

        this.setState({
            isEdit: true,
            temp_id : temp_id
        });
    }

    changePage(){
        this.setState({
            isEdit : false
        });
    }

    render()

     if(this.state.isEdit === true){
            return(
                <EditTemplate changePage = {this.changePage} isEdit={this.state.isEdit} 
                email = {this.props.email}/>)
        }

        else
        {
        return(
            <table  className = "table_style">
                 <thead>
                     <tr className = "table_style" >
                         <th className = "table_style">TempID</th>
                         <th className = "table_style">Name</th>
                         <th className = "table_style">CreatedOn</th>
                         <th className = "table_style">Action</th>
                     </tr>

               </thead>
               <tbody>
                {
                 this.props.temp_list.map((temp,index)=>
                     <tr className = "table_style">
                         <th className = "table_style">{temp.temp_id}</th>
                         <td className = "table_style">{temp.temp_name}</td>
                         <td className = "table_style">{temp.created_on}</td>
                         <td>
                         <button className="btn btn-info" type = "submit" onClick = {(e) => this.editTemp(e, temp.temp_id, temp.temp_name, temp.action_url, temp.duration)}>
                             EDIT
                         </button> 
                         </td>
                     </tr>
                     )
                 }
                </tbody>
                 </table>

因为 table 有很多数据，我对其进行了分页，并将映射移动到另一个文件，同时在 onClick 中调用了 editTemp 函数，代码将其更改为如下：-

ListTemp.js

    showTemp = (temp) => {
        var result = null;
        if (temp.length > 0) {
            result = temp.map((temp, index) => {
                return <ListMapp key={index} temp={temp} index={index} />;
            });
        }
        return result;
    };

    changePage(){
        this.setState({
            isEdit : false
        });
    }

    render()

     if(this.state.isEdit === true){
            return(
                <EditTemplate changePage = {this.changePage} isEdit={this.state.isEdit} 
                email = {this.props.email}/>)
        }

        else
        {
        return(
            <table  className = "table table-bordered table-hover">
                        <thead>
                        <tr className = "table_style" >
                            <th className = "table_style">TempID</th>
                            <th className = "table_style">Name</th>
                            <th className = "table_style">CreatedOn</th>
                            <th className = "table_style">Action</th>
                        </tr>

                        </thead>
                        <tbody>
                           {
                                this.showTemp(rowsPerPage)
                           }
                        </tbody>
                        </table>

所以 this.showTemp 中的映射现在来自：-

ListMapp.js

class ListMapp extends Component{
  constructor(props)
  {
    super(props);
    this.state ={
      isEdit : false,
      temp_id : '',
    }
    this.editTemp = this.editTemp.bind(this);
  }



editTemp = (e, temp_id, temp_name, action_url, duration) => {
        e.preventDefault();

        this.props.getTemp(temp_id)

        this.setState({
            isEdit: true,
            temp_id : temp_id
        });
    }

  render() {
    var { temp, index } = this.props;

      return (
                     <tr className = "table_style">
                         <th className = "table_style">{temp.temp_id}</th>
                         <td className = "table_style">{temp.temp_name}</td>
                         <td className = "table_style">{temp.created_on}</td>
          <td>
             <button className="btn btn-info" type = "submit" onClick = {(e) => this.editTemp(e, temp.temp_id, temp.temp_name, temp.action_url, temp.duration)}>
            EDIT
          </button> 
          </td>               
        </tr>
      );
    }
  }

export default ListMapp;

我现在需要 ListTemp.js 中 ListMapp.js 中的 editTemp 函数的 isEdit 状态来触发 [=19= 中的 if 条件].我怎样才能做到这一点？在我找到的所有相关答案中，状态是通过将 onClick 链接到 handleClick 函数并在父组件中执行类似操作来发送的，但我不知道如何在此处完成，因为在这种情况下 onClick 已经调用 isEdit 函数反过来利用 this.props.temp_list 的映射并且也有自己的参数。非常感谢任何帮助、意见和建议。

Answer 1

您需要将状态从 child 组件提升到 parent 组件。我假设这是您要附加 child 组件 <ListMapp key={index} temp={temp} index={index} />.

的地方

在这里，您需要将一个事件处理函数作为 prop 传递给 child。（例如）<ListMapp key={index} temp={temp} index={index} handler={some_fn}/> （handler 是您将发送到 child 的道具，sone_fn 将是将从 child 接收数据的函数）

在 child 组件中，您可以调用 props.handler(data) 并将您想要发送的任何数据发送到 parent。

将功能状态从子组件导出到父组件

Exporting state of function from child to parent component

javascript

react-redux