时间戳

首页 > 解决方案 > 尝试更新值时无法更改状态

reactjs - 尝试更新值时无法更改状态

问题描述

我是新手，我正在创建一个员工表单，我必须将性别信息发送为 JSON 格式。初始状态

constructor(){

    super()
    this.state ={
        gender:{
            gender:""
        },
 }

在这里，我定义了我的初始状态。handleChange 事件部分

handleChange(event) {
    const {name, value, type, checked} = event.target
    type === "checkbox" ? this.setState({ [name]: checked }) : this.setState({ [name]: value })
}

我在这里处理复选框类型数据以更新当前状态的值。这是句柄提交部分。我必须以这种格式将数据发送到 API

gender: {
gender:"male"
}
handleSubmit(event) {

    event.preventDefault();

        const obj = this.state

        console.log(this.obj)
        axios.post('https://jsonplaceholder.typicode.com/posts',this.state)

  }

形成部分

 <div className="form-group">
       <label for="gender">Gender:</label>
            <div className="radio" style={genderRadio}>
                   <label>
                     <input type="radio" value="male" checked={this.state.gender.gender === "male"} onChange={this.handleChange} name="gender"  />Male</label>

              </div>
             <div className="radio">
                   <label>
                      <input type="radio"  value="female" checked={this.state.gender.gender === "female"} onChange={this.handleChange} name="gender"/>Female</label>
             </div>
             <div className="radio ">
                <label>
                   <input type="radio"  value="others" checked={this.state.gender.gender === "others"} onChange={this.handleChange} name="gender" />Others</label>
             </div> 


  </div>

标签： reactjs

解决方案

onChange如下更改您的处理程序

      handleChange(event) {
            const {name, value, type, checked} = event.target
            if(type === "checkbox"){
              this.setState({ [name]: checked })
            } else {
              if(name=== "gender"){
                this.setState({ gender: { gender: value });
              } else {
                this.setState({ [name]: value })
              }
            }
        }

出现问题是因为您将性别嵌套在另一个性别对象中。

推荐阅读