React - 表单 - 如何处理子组件更新

Question

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

起初我在项目本身上创建一个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 的状态

我认为这是正确的方法，但我不知道如何让它发挥作用。

此时我有类似以下内容：

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} />
        )
    }
}  

项目表：

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}
        )
    }
}

项目行：

class ItemRow extends Component {

    removeItem(item){
        this.props.removeItem(item)
    }

    render() {
        return (
            <FormControl
                type="text"
                name="name"
                value={this.props.item.name}
                onChange={this.updateItem}
            />

            <FormControl
                type="text"
                name="quantity"
                value={this.props.item.quantity}
                onChange={this.updateItem}
            />

            <FormControl
                type="text"
                name="price"
                value={this.props.item.price}
                onChange={this.updateItem}
            />

            <Button bsStyle="warning" onClick={this.removeItem}><Glyphicon glyph="trash"/></Button>
        )
    }
}

Answer 1

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

您将方法“updateItem”作为道具从 Form 传递给 ItemTable，然后传递给 ItemRow（就像你正在做的那样）

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