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

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

1 个答案: