Question

我的表单component的{{1}}包含state数组。当其中一个items输入更新时，我很难尝试更新表单的state。

首先，我在项目上创建item并使用以下代码更新值：

state

这适用于更新输入的值，但是class ItemRow extends Component{ constructor(props){ super(props) this.state = this.props.item; } updateItem(event) { const target = event.target; const value = target.type === 'checkbox' ? target.checked : target.value; const name = target.name; this.setState({ [name]: value }); } ..... render(){ return ( <FormControl type="text" name="name" value={this.state.name} onChange={this.updateItem} /> <FormControl type="text" name="price" value={this.state.price} onChange={this.updateItem} /> ..... ) } }是state的本地值，而item无法反映或访问

我想弄清楚如何将form保留在state中并让form更新item的状态

我认为这是正确的做法，但我无法弄清楚如何让它发挥作用。

此时我有以下类似内容：

form

ItemTable：

class Form extends Component{
    this.state = {
        items: [
            { name: 'soup', price: 7, quantity: 1 }
            { name: 'salad', price: 5, quantity: 2 }
        ]
    }

    updateItem(e) {
       // Not sure how to handle updating
    }

    removeItem(item) {
        let items = this.state.items;
        items.splice(items.indexOf(item), 1);
        this.setState({items: items})
    }

    render(){
        return(
            <ItemTable items={this.state.items} updateItem={this.updateItem} removeItem={this.removeItem} />
        )
    }
}

ItemRow：

class ItemTable extends Component {
    removeItem(item){
        this.props.removeItem(item)
    }

    render(){
       let items = [];
       this.props.items.forEach((item) => {
           items.push(<ItemRow item={item} key={item.id} removeItem={this.removeItem.bind(this,item)} updateItem={this.props.updateItem}/>);
       });
        return(
            {items}
        )
    }
}

Answer 1

您非常接近解决方案。如果你需要在组件之间共享一个状态，你应该在最应该知道状态的父组件中使用它（在你的情况下是Form组件）。

你传递方法＆＃34; updateItem＆＃34;从Form到ItemTable，然后是ItemRow（就像你正在做的那样）

在此阶段，在ItemRow中，您可以通过调用＆＃39; this.props.updateItem＆＃39;来使用该方法。如果需要，你可以运行Form中定义的函数，传递一些参数。

React - Forms - 如何处理子组件更新

1 个答案: