如何使單選按鈕工作並在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>

希望這對您有用！