Question

假设我有这个父组件。

Parent.jsx

render() {
    const headers = ["id","desc1", "desc2", "actions"];
    return(
        <div>
            <input type = "text" placeholder = "Product Brand" value={ this.state.desc }/>
            <input type = "text" placeholder = "Product Brand" value={ this.state.desc2 }/>
            <button type = "button" onClick = { this.handleSubmit.bind(this) }>Add</button>

            <CustomTable mystate = { this.state } header = { headers } data = { this.props.store.productbrandlist }/>
        </div>
    )
}

和这个CustomTable.jsx

renderHeaders(){
    return(
        this.props.header.map(function(header, index){
            return <th key={index}>{header}</th>
        })
    )
}

renderRows(){
    // console.log("here1");
    // return(
    //  <ListItem datarows = { this.props.data }/>
    // )
    return this.props.data.map((list, id) => <ListItem mystate = {this.props.mystate} key_id={id} key={id} col = {list}/> )
}

render(){
    return(
        <table className="table">
            <thead>
                <tr>{ this.renderHeaders() }</tr>
            </thead>
            <tbody>
                { this.renderRows() }
            </tbody>
        </table>
    )
}

和此组件呈现表的行

render(){

    return(
        <tr key = { this.props.key_id }>
            { this.renderColumns() }
            { this.renderActions() }
        </tr>
    )
}
renderColumns(){
    var columns = []
    for (var key in this.props.col)
    {
        if (this.state.isEditing){
            columns.push(<td key = {key.id}><input ref = "txt" type = "text" value = { this.state.itemValue } onChange = { this.onTextChange.bind(this) } /></td>)
        }
        else
        {
            columns.push(<td key = {key.id}>{ this.props.col[key] }</td>)
            // this.setState({
            //  itemValue: key,
            //  isEditing: false
            // })

        }

    }
    return columns
}

renderActions(){
    if (this.state.isEditing){
        return (
            <td>
                <button type="button" onClick = { this.handleSaveClick.bind(this) }>Save</button>
                <button type="button" onClick = { this.handlCancelClick.bind(this) }>Cancel</button>
            </td>
        )
    }

    return(
        <td>
            <button type="button" onClick = { this.handleEditClick.bind(this) }>Edit</button>
            <button type="button" onClick = { this.handleDeleteClick.bind(this) }>Delete</button>
        </td>
    )
}

我的问题是如何配置它，以便在我点击ListItem组件中创建的按钮编辑时。数据将显示在parent.jsx

中创建的输入框中

Answer 1

查看您的代码，您只需要通过props将对父方法的引用传递给所需的子代。我没有完整的代码，因此未经过测试，但应该让您了解如何操作。

如果您的父母和ListItem之间有另一个子图层，我肯定会鼓励使用Redux。就个人而言，我可以使用道具为简单项目传递两个级别的引用。

要让您的ListItem值显示在父输入字段中，请进行以下更改：

在你的父母：

// you need two-way data binding between state and input values
onChange(){
    this.setState({
      desc: this.refs.desc1.value,
      desc2: this.refs.desc2.value
    });
}

// this method will get triggered by ListItem's edit button onClick
onRowEdit(desc1, desc2){
    this.setState({
      desc: desc1,
      desc2: desc2
    });
}

render() {
        const headers = ["id","desc1", "desc2", "actions"];
        return(
            <div>
                <input ref="desc1" type = "text" placeholder = "Product Brand" value={ this.state.desc } onChange={this.onChange.bind(this)} />
                <input ref="desc2" type = "text" placeholder = "Product Brand" value={ this.state.desc2 } onChange={this.onChange.bind(this)/>
                <button type = "button" onClick = { this.handleSubmit.bind(this) }>Add</button>

                <CustomTable onEdit={ this.onRowEdit } mystate = { this.state } header = { headers } data = { this.props.store.productbrandlist }/>
            </div>
        )
    }

您的自定义表格renderRows：

renderRows(){
    // console.log("here1");
    // return(
    //  <ListItem datarows = { this.props.data }/>
    // )
    return this.props.data.map((list, id) => <ListItem onEdit={this.props.onEdit} mystate = {this.props.mystate} key_id={id} key={id} col = {list}/> )
}

最后在你的ListItem内handleEditClick方法调用中传递道具中的函数：

handleEditClick(){
  // const desc1 = ... 
  // const desc2 = ...
  this.props.onEdit(desc1, desc2); // this call will cause desc1, desc2 values to show up in the parent's input fields.
}

在ReactJs中更改子项的父项状态

1 个答案: