Javascript React setState嵌套对象回调

我有一个父组件：

class ParentComponent extends React.Component {

    constructor() {
            super();
            this.state = {
                filterInputs: {
                    priceMin: "",
                    priceMax: ""
                   // and many other similar nested fields
                }
            } 
            this.handleChange = this.handleChange.bind(this)
        }



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

    //render method omitted     
 }

    class GrandchildComponent extends React.Component {

        handleChange = e => {
            this.props.handleChange && this.props.handleChange(e)
        };

        render() {
            return (
                <div>
                            <InputText id="priceMin"
                                       value={this.props.filterInputs.priceMin}
                                       name="priceMin"
                                       onChange={this.handleChange}
                            />
                            <InputText id="priceMax"
                                       value={this.props.filterInputs.priceMax}
                                       name="priceMax"
                                       onChange={this.handleChange}
                            />

                            //And many other similar input fields
                </div>
            )
        }
    }

我还有一个更深层次的嵌套子组件：

class ParentComponent extends React.Component {

    constructor() {
            super();
            this.state = {
                filterInputs: {
                    priceMin: "",
                    priceMax: ""
                   // and many other similar nested fields
                }
            } 
            this.handleChange = this.handleChange.bind(this)
        }



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

    //render method omitted     
 }

    class GrandchildComponent extends React.Component {

        handleChange = e => {
            this.props.handleChange && this.props.handleChange(e)
        };

        render() {
            return (
                <div>
                            <InputText id="priceMin"
                                       value={this.props.filterInputs.priceMin}
                                       name="priceMin"
                                       onChange={this.handleChange}
                            />
                            <InputText id="priceMax"
                                       value={this.props.filterInputs.priceMax}
                                       name="priceMax"
                                       onChange={this.handleChange}
                            />

                            //And many other similar input fields
                </div>
            )
        }
    }

类组件扩展了React.Component{
handleChange=e=>{
this.props.handleChange&&this.props.handleChange（e）
};
render（）{
返回(
//以及许多其他类似的输入字段
)
}
}

（我试图尽可能减少代码）

在这种情况下，用户填写一些输入字段，我试图使用回调方法

handleChange

将输入发送到父组件。 我收到一个错误：

TypeError:无法读取null的属性“name”

，控制台显示：

警告：出于性能原因，此合成事件被重用。如果您看到了这一点，那么您正在访问一个已发布/无效的合成事件的属性“target”。这被设置为null。如果必须保留原始合成事件，请使用event.persist（）。

问题似乎出在我的

handleChange

方法中，但我不确定如何解决它。

只需使用

this.setState({
  filterInputs: {
    ...this.state.filterInputs,
    [e.target.id]: e.target.value,
  }
});

---

这回答了你的问题吗？事件对象在React中被重用，因此事件对象的value属性可能会发生更改。尽快从事件对象获取所需的w/e，并将数据向上游传递给正在使用它的w/e。不要传递事件本身。从中得到你需要的，然后放弃。