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

Question

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

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

这是来自父组件的 sn-p：

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 组件的 sn-p：

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 旁边。它只需要总道具。