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

Question

我有一个表单 component，它有一个包含 items 数组的 state。当 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 [=27= 反映或访问]

我想弄清楚如何将 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 中定义的函数，传递一些参数。

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

React - Forms - How to deal with child component updates

javascript

forms

state

reactjs