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

Question

我有一个表单组件，它有一个包含项目数组的状态。 当其中一个 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}
            />

            .....
        )
    }
} 

这对于更新输入的值来说效果很好，但是状态是item本地的，并且不能被form<反射(reflect)或访问

我试图弄清楚如何将状态保留在表单中，并让item更新的状态表单

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

此时我有类似以下内容:

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”作为 Prop 从 Form 传递到 ItemTable，然后传递到 ItemRow (就像您正在做的那样)

在此阶段，在 ItemRow 内，您可以通过调用“this.props.updateItem”来使用该方法，并且可以运行 Form 中定义的函数，并根据需要传递一些参数。