Question

我正在尝试学习React JS，并且正在从事个人项目。我陷入困境是因为我无法将子组件中输入字段的值传递给父组件的状态。

我尝试使用onChange事件，但由于某种原因，它正在调用的函数handleChange未被触发。

以下是“父”组件的摘录：

class App extends Component {
    state = {
        myArray: [{ //myArray is being updated by another child component, which sets the values for id and amount; this works fine
                id: 1,
                amount: 12
            },
            {
                id: 2,
                amount: 23
            }
        ]
        total: 0 //expected value for total is 35
    };

    handleChange = e => {
        const { name, value } = e.target
        this.setState({
            [name]: value
        });
    }

    render() {
        return ( 
            <Child 
            handleChange={this.handleChange}
            myArray={this.state.myArray} />
            )
        }
    }

这是Child组件的摘录：

class Child extends Component {

    render() {
        const { myArray, handleChange } = this.props;

        const totalAmount = myArray.reduce(function (a, b) {
            return a + b.amount;
        }, 0);

        return (
        <div>
            <label htmlFor="total"> Total Amount: </label>
            <input id="total"
            name="total"
            type="number"
            placeholder="0.00"
            value={totalAmount}
            onChange={e => handleChange(e)}
            /> 
        </div>
        )
    }
}

总输入字段中的值正确呈现。但是，我试图实现的是每次更改此输入字段值时（当其他子组件更新myArray值，因此总和也更改时），我希望在父组件的状态下更新总值。

Answer 1

您正在立即执行callback，而不传递event对象。尝试这样

onChange = {e => handleChange("total")(e)}

还在handleChange内，您的论点名称错误

handleChange = propertyName => e => {
    this.setState({
        [property]: e.target.value
    });
}

应该是

handleChange = property => e => {
    this.setState({
        [property]: e.target.value
    });
}

Answer 2

您不需要手动传递字段名称，可以从事件中获取它。首先给您输入的名称

<input name="total" ...etc >

然后，您就可以在handleChange

中接收事件了

handleChange = e => {
   const { name, value } = e.target
   this.setState({
       [name]: value
   )}
  }

在子组件中的调用方式应该是

onChange={handleChange}

在此处查看代码 https://codesandbox.io/embed/unruffled-pascal-d5p2q?fontsize=14

为了获得更好的结构，最好将childComponent2放在childComponent1旁边。它只需要全部道具。

当React中的值被代码更改时，如何在输入上触发onChange事件？

2 个答案: