时间戳

首页 > 解决方案 > 如何为动态创建的输入元素设置状态

reactjs - 如何为动态创建的输入元素设置状态

问题描述

我正在使用 document.createElement 创建一个输入元素并设置属性。我想要一个 onchange 事件来更新状态。我该如何进行？以下是我的代码

addoffers = () => {

        var input = document.createElement("input");
        input.setAttribute('name', 'whatweoffer'.concat(Math.floor((Math.random() * 1000) + 1)));
        input.setAttribute('class','form-control mb-3');
        input.setAttribute('placeholder','what we offer');
        input.onchange =  this.handleChange;
        var parent = document.getElementById("offerinput");
        parent.appendChild(input);


    }

    handleChange = (e) => {
        this.setState({ [e.target.name]: e.target.value });
        console.log(e.target.value);

    }

<input type="text" className="form-control mb-3" id='whatweoffer'  name='whatweoffer' onChange={this.handleChange} placeholder='what we offer' required />

标签： reactjs

解决方案

试试这个

class DynamicInputs {
    constructor(props) {
        super(props);
        this.state = {
            inputs : []
        }
    }
    render() {
        return (
            <React.Fragment>
                {
                    this.state.inputs.map(inputValue =>{
                        <input key= {inputValue} type="text" placeholder="what we offer" className="form-control mb-3" name = {`whatweoffer${inputValue}`}  onChange = {this.handleChange} required/>                    })
                }
            </React.Fragment>
        )
    }

    handleChange = (e) => {
        this.setState({ [e.target.name]: e.target.value });
        console.log(e.target.value);

    }

    addInput() = () =>{
        let {inputs} = this.state;
        inputs.push((Math.floor((Math.random() * 1000) + 1))
        this.setState({
            inputs
        })
    }
}

推荐阅读