Question

我是新来的反应者，我正在创建一个员工表格，其中我必须将性别信息发送为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>

Answer 1

按如下所示更改您的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 })
              }
            }
        }

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

Answer 2

首先，您需要在this函数内绑定handleChange关键字，以便它指向组件的执行上下文。

要么在您的构造函数中显式绑定它，要么使用箭头功能。否则，this关键字将为undefined，因此您将无法使用this.setState()

此外，您在组件状态中还有一个gender对象，其对象名为gender。您需要考虑两个级别的数据。因此，更新内部性别值将不会像this.setState({ [name]: checked })

那样简单

在此处查看有效的沙箱：https://codesandbox.io/s/elated-maxwell-piobv

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      gender: {
        gender: ""
      }
    };
  }
  handleChange = event => {
    const { name, value, type, checked } = event.target;
    if (type !== "checkbox") {
      this.setState(
        {
          [name]: {
            ...this.state[name],
            [name]: value
          }
        }
      );
    }
  };

  handleSubmit(event) {
    event.preventDefault();

    const obj = this.state;

    console.log(this.obj);
    // axios.post("https://jsonplaceholder.typicode.com/posts", this.state);
  }
  render() {
    return (
      <div className="form-group">
        <label for="gender">Gender:</label>
        <div className="radio">
          <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>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 3

您的问题是更新状态。尝试以下替代方法。

** Current:**

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

**Solution:**

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

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

}

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

3 个答案: