反应 setState 嵌套 object 回调

Question

I have a parent component:

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     
 }

I also have a deeper nested child component:

    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>
            )
        }
    }

(I tried to keep the code as minimal as possible)

I have a situation where the user is filling in some input fields and I am trying to send the inputs up to my parent component using a callback method handleChange . I am getting an error: TypeError: Cannot read property 'name' of null , and the console says: Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property ``target`` on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist(). Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property ``target`` on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist().

The problem seems to be in my handleChange method, but I am not sure how to fix it.

Answer 1

just use

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