Установка состояний элемента массива в React

Question

У меня есть эта простая форма, и мне трудно изменить и получить состояние этого одного массива.

Состояние установлено

this.state = {
            .....
        treatment:              [],
         .....
    }

При изменении

onChange= (e) => {
    this.setState({
        [e.target.name]: e.target.value,
        error: ''
    })
}

Элемент массива вызывается по щелчку в форме с одним элементом массива в нем. Нажмите здесь, чтобы добавить обработку

При нажатии на кнопку JS запускает

$(document).ready(function (){
$('#addHidden').click(function(){
    var addtext = $('.hidden_box').html();
        $('#addHiddenBox').append(addtext);
});

$("#addHiddenBox").on("click", ".removeText", function () {
    $(this).closest(".boxAdded").remove();
});

});

ивводит этот скрытый элемент

 <div className="hide hidden_box">           
      <div className="treatments col-sm-6 boxAdded">             
           <div className="form-group">
             <input className="form-control" type="text" placeholder="Treatment" name="treatment[]" value={this.state.treatment} onChange={this.onChange}/>
             <button className="btn btn-danger removeText" type="button"><i className="fa fa-times" aria-hidden="true"></i></button>
           </div>
        </div>
 </div>

Я не могу установить состояние лечения [] здесь.Состояния становятся пустыми.

Answer 1

Наконец, я решил это

JSX выглядит как

<div className="form-group">
    <button className="btn btn-success" id="addHidden" type="button" onClick={(e)=>this.addTreatment(e)}><i className="glyphicon glyphicon-plus"></i> Click Here to add Treatment</button>
      <div id="addHiddenBox" className="row">
{
    this.state.treatment.map((treatment, index) =>{
       return(        
         <div className="treatments col-sm-6 boxAdded" key={index}>             
          <div className="form-group">
           <input className="form-control" type="text" placeholder="Treatment" name="treatment" value={treatment} onChange={(e)=>this.arrayChange(e, index)}  />
           <button className="btn btn-danger removeText" type="button" onClick={()=>this.arrayRemove(index)}><i className="fa fa-times" aria-hidden="true"></i></button>
          </div>
         </div>
      )
   })
}
 </div>
</div>

Функции:

this.state = {
        ...........
        treatment:              [],
        ..........
    }

addTreatment(){
    this.setState({treatment: [...this.state.treatment, ""]})
}

arrayChange(e, index){
    this.state.treatment[index] = e.target.value
    this.setState({treatment: this.state.treatment})
}

arrayRemove(index){
    this.state.treatment.splice(index, 1)
    this.setState({treatment: this.state.treatment})
}

Answer 2

e.target.name в вашем случае вернет "treatment[]".Обратите внимание на квадратные скобки.

Измените его на:

<input className="form-control" type="text" placeholder="Treatment" name="treatment" value={this.state.treatment} onChange={this.onChange}/>