我想在单击下拉按钮时创建一些输入区域。如果单击第一个按钮，请在此div中创建一些输入区域，然后我要管理此输入的值。例如，管理员可以创建5000个输入，而我可以管理所有输入值。
我想将值保持在数组状态。
我通过点击按钮尝试了 document.createElement 。这些选项创建了输入区域，但不将值保持在数组状态
我的状态：
constructor(props) {
super(props)
this.state = {
title : '',
questions: [],
ph: [],
data: []
}
}
我的功能
：
changeInput = (e) => {
this.setState({
[e.target.name] : e.target.value
})
}
addNewQuestionPart(){
this.setState({questions: [...this.state.questions, ""]}) //for text
}
addInputPart() {
this.setState({ph: [...this.state.ph, ""]})
}
handleChange(e, index){
this.state.questions[index] = e.target.value
//this.setState({questions[index] : e.target.value});
this.setState({questions : this.state.questions});
}
handlePlaceholderArea(e, index){
this.state.ph[index] = e.target.value
this.setState({ph : this.state.ph});
}
clickInput(e, index) {
this.setState({ph: [...this.state.ph, ""]})
var mainpart = document.getElementById(index);
var questionInput = document.createElement("input");
questionInput.setAttribute("class", "form-control mb-2");
questionInput.setAttribute("type", "text");
questionInput.setAttribute("placeholder","Question...");
questionInput.value = this.state.questions[index];
questionInput.onChange = this.handleChange;
var placeholderInput = document.createElement("input");
placeholderInput.setAttribute("class", "form-control mb-2");
placeholderInput.setAttribute("type", "text");
placeholderInput.setAttribute("placeholder", "Write placeholder for question's input");
mainpart.appendChild(questionInput);
mainpart.appendChild(placeholderInput);
}
clickRadio(e, index) {
var mainpart = document.getElementById(index);
var questionInput = document.createElement("input");
questionInput.setAttribute("class", "form-control mb-2");
questionInput.setAttribute("type", "text");
questionInput.setAttribute("placeholder","Question...");
var dataArea = document.createElement("textarea");
dataArea.setAttribute("class", "form-control mb-2");
dataArea.setAttribute("type", "text");
dataArea.setAttribute("placeholder","Write all option line by line");
mainpart.appendChild(questionInput);
mainpart.appendChild(dataArea);
}
clickCheckbox(e, index) {
var mainpart = document.getElementById(index);
var questionInput = document.createElement("input");
questionInput.setAttribute("class", "form-control mb-2");
questionInput.setAttribute("type", "text");
questionInput.setAttribute("placeholder","Question...");
var dataArea = document.createElement("textarea");
dataArea.setAttribute("class", "form-control mb-2");
dataArea.setAttribute("type", "text");
dataArea.setAttribute("placeholder","Write all option line by line");
mainpart.appendChild(questionInput);
mainpart.appendChild(dataArea);
}
clickOnlyText(e, index) {
var mainpart = document.getElementById(index);
var questionInput = document.createElement("textarea");
questionInput.setAttribute("class", "form-control mb-2");
questionInput.setAttribute("type", "text");
questionInput.setAttribute("placeholder","Please write your text");
mainpart.appendChild(questionInput);
}
其呈现方式：
render() {
return (
<div className="">
<div className="card">
<Headers />
<div className = "card-body container">
<form onSubmit={this.submitForm}>
<div className="form-group">
<Card bg="light" border="dark">
<Card.Header>
New Form
</Card.Header>
<Card.Body>
<Card.Text>
Please enter a name for your new form
</Card.Text>
<input className = "form-control mb-2" type="text" placeholder="Soru Başlığı" name="title" onChange={this.changeInput} value = {this.state.title}/>
</Card.Body>
</Card>
</div>
<div className="form-group" id="dynamic-form-body">
<Text text="Aşağıdaki bölümden sorunuza uygun cevap tipini seçin ve gerekli alanları doldurarak sorunuzu formunuza ekleyin."/>
{
this.state.questions.map((question, index)=>{
return (
<div key={index}>
<br />
<Card border="dark" >
<Card.Body>
<Form id={index}>
{/* <Form.Group controlId="exampleForm.ControlInput1">
<Form.Label>Question Text</Form.Label>
<input className = "form-control mb-2" type="text" placeholder="Question..." onChange = {(e)=>this.handleChange(e, index)} value = {question} />
</Form.Group> */}
<Form.Group controlId="exampleForm.ControlSelect1">
<DropdownButton id="dropdown-basic-button" title="Select Type">
<Dropdown.Item onClick= {(e) => this.clickInput(e, index)}>Input</Dropdown.Item>
<Dropdown.Item onClick= {(e) => this.clickRadio(e, index)}>Radio</Dropdown.Item>
<Dropdown.Item onClick= {(e) => this.clickCheckbox(e, index)}>Checkbox</Dropdown.Item>
<Dropdown.Item onClick= {(e) => this.clickOnlyText(e, index)}>Only Text</Dropdown.Item>
</DropdownButton>
</Form.Group>
{/* {
this.state.ph.map((phs, index)=> {
return(
<input className = "form-control mb-2" type="text" placeholder="Please Write Placeholder..." onChange = {(e)=>this.handlePlaceholderArea(e, index)} value = {phs} />
)
})
} */}
</Form>
</Card.Body>
</Card>
{/* <input className = "form-control mb-2" type="text" placeholder="Soru İçeriği" onChange = {(e)=>this.handleChange(e, index)} value = {question} /> */}
</div>
)
})
}
{/* <select className="form-control">
<option value="0">Input</option>
</select>
<br />
<input id="input-question" className = "form-control mb-2" type="text" placeholder="Soru İçeriği" name="ques" onChange={this.changeInput} value = {this.state[this.name]}/> */}
<hr />
{/* <input id="denemee" className = "form-control mb-2" type="text" placeholder="Soru İçeriği" name="ques1" onChange={this.changeInput} value = {this.state[this.name]}/> */}
{
//React.createElement('input', {onChange: this.changeInput, className:"form-control mb-2", type : "text", placeholder: 'Soru İçeriği', name: this.state.lastId.toString() + "-name", value: this.state['denememelerce']})
}
</div>
<div className="form-group">
<Button variant="outline-secondary" id="add-question" type="button" onClick= {(e)=>this.addNewQuestionPart(e)} block>+ Add New Question +</Button>
{/* <button className ="btn btn-danger btn-block" id="add-question" type="button" onClick= {(e)=>this.addNewQuestionPart(e)}>+ Add New Question +</button> */}
</div>
<div className="form-group">
<Button variant="primary" id="save-form" type="submit" block>Save Form</Button>
{/* <button className="btn btn-success btn-block" id="save-form" type="submit">Save Form</button> */}
</div>
</form>
</div>
</div>
</div>
)
}