ReactJS Задача множественного ввода setState и state - PullRequest
Новая
       5

ReactJS Задача множественного ввода setState и state

0 голосов
/ 14 апреля 2020

Привет, ребята, мне нужна помощь, как сделать так, чтобы редактирование не проходило go через все входные данные и вносило в него изменения.

Когда я вводил ввод в одно из текстовых полей, он повторяется для других вводов. Я новичок, чтобы отреагировать, поэтому у меня возникли проблемы с этим.

карта на l oop, enter image description here, например, она отображает три из API и появятся 3 входа.

См. Рисунок, надеюсь, вы мне поможете. 

handleSubmitReply(event, discussionid, classid){
        event.preventDefault();
        let userid = sessionStorage.getItem('userid');
        const {
            userAccountId,
            reply
        } = this.state;

        const postData = {
            userAccountId:userid,
            reply
        };
        let sessionToken = sessionStorage.getItem('session');
        let sessToken = sessionToken.replace(/\"/g, "");

        fetch('http://tfismartasp-001-site10.btempurl.com/api/Class/'+ classid +'/discussion/'+discussionid+'/response', {

        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'Authorization': 'Bearer' + " " + sessToken
        },
        body: JSON.stringify(postData),
        })
        .then(response => {
            if(response.status === 400){
            return response.json();
            }else{
            this.addNotification('success', 'Success', 'All Data is Saved', 'top-right')
            this.componentDidMount();
            return response.json();
            }
        })
        .then(responseData => {
            console.log(responseData);
            return responseData;
        })
        .catch(err => {

            console.log("fetch error" + err);
        });

    }
this.handleChange = this.handleChange.bind(this);

handleChange(event) {
                event.preventDefault();
                console.log(event.target.name)
                console.log(event.target.value)
                this.setState({
                    [event.target.name]: event.target.value
                });
            };


{discussionData.map(dd => (
  <input type="text" class="form-control bg-light" placeholder="Reply" name={dd.discussion.instructions} value={this.state[dd.discussion.instructions]} onChange={this.handleChange} />
))}

вот обновленный код, что я буду делать с "ответом" postData при отправке. требуется заполнить все поля.

Как его сериализовать, чтобы опубликовать в моем API

Ответы [ 2 ]

1 голос
/ 14 апреля 2020

event.target.name всегда будет "reply", поскольку каждый из ваших входов имеет name="reply".

Назначение каждому входу уникального имени должно решить вашу проблему.

0 голосов
/ 14 апреля 2020

Попробуйте что-то подобное 

handleChange(event, i) {
                event.preventDefault();
                console.log(event.target.name)
                console.log(event.target.value)
                this.setState({
                    [`${event.target.name}{index}`]: event.target.value
                });
            };


{items.map((item, index)=> (
  <input type="text" class="form-control bg-light" placeholder="Reply" name=`name${index}` value= 
  {this.state.reply} onChange={e => this.handleChange(e, index)} />
))}

И создайте начальное состояние в виде массива. Может быть, это поможет вам.

Спасибо

...