javascript - ReactJS多输入问题setState和state

Question

大家好，我需要帮助，如何使 editchange 不会遍历所有输入并对其进行更改。

当我在其中一个文本框中输入一个输入时，它会重复到其他输入。我是新来的，所以我在处理这个问题时遇到了麻烦。

map 正在循环中，例如，它显示 3 个来自 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 中

Answer 1

event.target.name 将始终为 "reply"，因为您的每个输入都有 name="reply"。

为每个输入指定一个唯一的名称应该可以解决您的问题。