Question

我正在使用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 />

Answer 1

尝试一下

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

Answer 2

尽管已经接受了答案，但我想给您另一种方法。为什么不直接使用自己组件的状态来决定是否显示输入，而其他属性只是状态值，而不是动态创建input。例如：

render() {
  const {
    isInputDisplayed, inputName, inputId, inputClasses, inputPlaceholder,
  } = this.state;
  return (
    { isInputDisplayed && (
      <input type="text" name={inputName} id={inputId} className={inputClasses} placeholder={inputPlaceholder} />
    )}

  );
}

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

2 个答案: