如何使单选按钮工作并在reactjs中输出值

Question

我试图让单选按钮在单击它们时变为蓝色，但由于某种未知原因，它没有。

我尝试删除 value 属性、name 属性，但它不起作用。

constructor() {
        super()
        this.state = {
            firstName: '', 
            lastName: '',
            Age: '',
            Gender: '',
            isSubmitted: false
        }
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    }


    handleChange(event){
        const {name, value, type, checked} = event.target
        type === "checkbox" ? 

this.setState({ [name]: checked }) 
: this.setState({ [name]: value })
            this.setState({
                isSubmitted: false
            })
        }

    handleSubmit(event){
        this.setState({isSubmitted:true})
        event.preventDefault();
    }

    render() {
        return (
            <main>
                <form onSubmit={this.handleSubmit}>
                    <input 
type="text" 
name="firstName" 
value={this.state.firstName}  
placeholder="First Name" 
onChange={this.handleChange}/>
<br />
                    <input name="lastName" value={this.state.lastName}



placeholder="Last Name" 
onChange={this.handleChange}/><br />
                    <input  type="number" name="Age" value={this.state.Age} 
placeholder="Age" onChange={this.handleChange}/><br />`
                    <label>
                        <input 
                        type="radio" 
                        name="gender"
                        value="male"
                        checked={this.state.Gender == "Male"} 
                        onChange={this.handleChange}
                        /> Male<br />
                    </label>

                    <label>
                        <input 
                        type="radio" 
                        name="gender"
                        checked={this.state.Gender == "Female"} 
                        value="female" 
                        onChange={this.handleChange}
                        /> Female <br /> <br />
                    </label>



                    <button>Submit</button>
                </form>
                <hr />
                <h2>Entered information:</h2>                
                 { this.state.isSubmitted == true ? 
                 <div> <p> Your name: {this.state.firstName}

      {this.state.lastName }</p>
      <p> Your age: {this.state.Age} </p> 
      <p> Your gender: {this.state.Gender} </p> </div>
                 : <div> </div>
                }




            </main>
        )
    }

我希望单选按钮可以点击，并将您点击的值输出到屏幕上。相反，它只显示性别旁边的任何内容。

Answer 1

你在handleChange遇到了一些拼写错误、变量名不一致和逻辑错误：

import React from 'react';

export default class App extends React.Component {
  state = {
    firstName: '',
    lastName: '',
    Age: '',
    gender: '',
    isSubmitted: false
  };

  handleChange = event => {
    const { name, value } = event.target;
    console.log(event.target);
    this.setState({ [name]: value });
  };

  handleSubmit = event => {
    this.setState({ isSubmitted: true });
    event.preventDefault();
  };

  render() {
    return (
      <main>
        <form onSubmit={this.handleSubmit}>
          <input
            type="text"
            name="firstName"
            value={this.state.firstName}
            placeholder="First Name"
            onChange={this.handleChange}
          />
          <br />
          <input
            name="lastName"
            value={this.state.lastName}
            placeholder="Last Name"
            onChange={this.handleChange}
          />
          <br />
          <input
            type="number"
            name="Age"
            value={this.state.Age}
            placeholder="Age"
            onChange={this.handleChange}
          />
          <br />
          <label>
            <input
              type="radio"
              name="gender"
              value="male"
              checked={this.state.gender === 'male'}
              onChange={this.handleChange}
            />{' '}
            Male
            <br />
          </label>
          <label>
            <input
              type="radio"
              name="gender"
              checked={this.state.gender === 'female'}
              value="female"
              onChange={this.handleChange}
            />{' '}
            Female <br /> <br />
          </label>
          <button>Submit</button>
        </form>
        <hr />
        <h2>Entered information:</h2>
        {this.state.isSubmitted === true ? (
          <div>
            {' '}
            <p>
              {' '}
              Your name: {this.state.firstName}
              {this.state.lastName}
            </p>
            <p> Your age: {this.state.Age} </p>
            <p> Your gender: {this.state.gender} </p>{' '}
          </div>
        ) : (
          <div> </div>
        )}
      </main>
    );
  }
}

Answer 2

您必须更新单选按钮中的value 和name。

检查下面的代码。

<label>
  <input
    type="radio"
    name="Gender"
    value="Male"
    checked={this.state.Gender == "Male"}
    onChange={this.handleChange}
  /> Male<br />
</label>

<label>
  <input
    type="radio"
    name="Gender"
    checked={this.state.Gender == "Female"}
    value="Female"
    onChange={this.handleChange}
  /> Female <br /> <br />
</label>

希望这对你有用！