在状态的特定对象中更新状态

Question

我要做的是更新下面组件中的一个状态，以便从各个节点的名称中获取值，并从输入中获取数据，我希望能够这样做，这样我就可以得到对象并更新它。最后，我要做的是通过表单更新这个状态，并从状态中获取对象，但是我需要输入的每个div的值，并获得如下的格式

节点：{标题：''，子标题：‘’，图像：‘’，链接：‘’}

​

  if (this.state.node1.name = 
      ReactDOM.findDOMNode(this).parentNode.getAttribute('name')) {
            this.setState({ [e.target.name]: e.target.value });
        }

 
    constructor(props) {
        super(props)
        this.state = {
            node1: {
                heading: '',
                sub_heading: '',
                link: '',
                image: '',
                name: 'node1'
            },
            node2: {
                heading: '',
                sub_heading: '',
                link: '',
                image: '',
                name: 'node2'
            },
            node3: {
                heading: '',
                sub_heading: '',
                link: '',
                image: '',
                name: 'node3'
            },
            node4: {
                heading: '',
                sub_heading: '',
                link: '',
                image: '',
                name: 'node4'
            },
            node5: {
                heading: '',
                sub_heading: '',
                link: '',
                image: '',
                name: 'node5'
            }
        }
    }
    handleChange = (e) => {
        e.preventDefault();
    }
    submitForm = (evt) => {
        evt.preventDefault();
    }
    render() {
        return (
            <div className="admin-page-con">
                <form method="POST" encType="multipart/form" onSubmit={this.submitForm} >
                    <h1 className="form-header">theme page</h1>
                    <div ref="node1" className="image1 card">
                        <h2>node1</h2>
                        <input name="image" type="file" />
                        <input name="heading" onChange={this.handleChange} id="header1" placeholder="Header" type="text" /><br />
                        <input name="sub_heading" onChange={this.handleChange} className="input-2" id="Sub-Header" placeholder="sub-Header" type="text" />
                        <input name="link" onChange={this.handleChange} className="input-2" id="header3" placeholder="link" type="text" />
                    </div>
                    <div ref="node2" className="image1 card">
                        <h2>node2</h2>
                        <input name="image" type="file" />
                        <input name="heading" id="header1" onChange={this.handleChange} placeholder="Header" type="text" /><br />
                        <input name="sub_heading" className="input-2" onChange={this.handleChange} id="header2" placeholder="Sub-Header" type="text" />
                        <input name="link" onChange={this.handleChange} className="input-2" id="header2" placeholder="link" type="text" />
                    </div>
                    <div ref="node3" className="image1 card">
                        <h2>node3</h2>
                        <input name="image" type="file" />
                        <input id="header1" name="heading" onChange={this.handleChange} type="text" placeholder="Header" /><br />
                        <input name="sub_heading" className="input-2" onChange={this.handleChange} id="header2" type="text" placeholder="Sub-Header" />
                        <input name="link" onChange={this.handleChange} className="input-2" id="header2" placeholder="link" type="text" />
                    </div>
                    <div ref="node4" className="image1 card">
                        <h2>node4</h2>
                        <input name="image" type="file" />
                        <input id="header1" name="heading" onChange={this.handleChange} type="text" placeholder="Header" /><br />
                        <input className="input-2" name="sub_heading" onChange={this.handleChange} id="header2" type="text" placeholder="Sub-header" />
                        <input name="link" onChange={this.handleChange} className="input-2" id="header2" placeholder="link" type="text" />
                    </div>
                    <div ref="node5" className="image1 card">
                        <h2>node5</h2>
                        <input name="link" type="file" />
                        <input id="header1" name="heading" type="text" onChange={this.handleChange} placeholder="Header" /><br />
                        <input className="input-2" name="sub_heading" id="header2" type="text" onChange={this.handleChange} placeholder="Sub-Header" />
                        <input name="link" onChange={this.handleChange} className="input-2" id="header2" placeholder="link" type="text" />
                    </div>
                    <input className="rect-btn submit-bt" type="submit" />
                </form>
            </div >
        )
    }

​

Answer 1

因为您的状态有带有键nodeNum的对象来跟踪每个div中所做的更改，所以您可以使您的handleInputChange函数接受另一个参数。

如下所示：

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

然后，在每个输入中，调用handleInputChange (类似于onChange={(event) => this.handleChange(event, nodeNum)} )，并且可以对输入有一个value属性，即this.state.nodeNum.inputName