如何在reactjs中将表单单选按钮重置为未选中？

Question

我为 1 个问题制作了 4 个单选按钮。 我已经提交了 2 个按钮并清除了输入。 当我在单击清除输入后提交表单时，它不会清除选中的按钮以取消选中我如何使用reset功能来做到这一点？

联系方式.js：

import React, { Component } from 'react';

class ContactForm extends Component {
  constructor(props){
    super(props);
    this.state = {
        age:'',
        gender:'',
        health:'',
        name:'',
        email:'',
        info:'',
        fitness:''
    };
  } 

setAge(checkedValue){
    console.log(checkedValue);
    this.setState({
        age:checkedValue
    })
  }

setGender(checkedValue){
    console.log(checkedValue);
    this.setState({
        gender:checkedValue
    })
  }

  onChangeTextBoxGender(event){
  this.setState({gender: event.target.value})
  }

 savedata(age, gender, health, name, email, info, fitness){
        let newcontent = contentref.push();
        newcontent.set({
            age:this.state.age,
            gender:this.state.gender,
            health:this.state.health,
            name:this.state.name,
            email:this.state.email,
            info:this.state.info,
            fitness:this.state.fitness
        });
  }

  reset(){
    this.setState({
      age:'',
      gender:''
    })
  }

 render() {

    return (
      <div>

        <div id="center">
          <form>

              <div className="form-group">
                <div className="col-sm-offset-2 col-sm-10">
                  <h3>[Test]Contact us Survey Form</h3>  
                </div>
              </div>

            <div id="agegroup" >
              <div className="form-group">
                <div className="col-sm-offset-2 col-sm-10">
                  <h4>What is your age group?</h4>  
                </div>
              </div>

              <div className="form-group">
                <div className="col-sm-offset-2 col-sm-10">
                  <div className="radio">
                    <label><input type="radio" name="age" onChange={this.setAge.bind(this,'>=25 yrs')}/> >=25 yrs</label>
                  </div>
                </div>
              </div>
              <div className="form-group">
                <div className="col-sm-offset-2 col-sm-10">
                  <div className="radio">
                    <label><input type="radio" name="age"  onChange={this.setAge.bind(this,'26-35 yrs')}/> 26-35 yrs</label>
                  </div>
                </div>
              </div>
              <div className="form-group">
                <div className="col-sm-offset-2 col-sm-10">
                  <div className="radio">
                    <label><input type="radio" name="age" onChange={this.setAge.bind(this,'36-50 yrs')}/> 36-50 yrs</label>
                  </div>
                </div>
              </div>
              <div className="form-group">
                <div className="col-sm-offset-2 col-sm-10">
                  <div className="radio">
                    <label><input type="radio" name="age" onChange={this.setAge.bind(this,'>50 yrs')}/> >50 yrs</label>
                  </div>
                </div>
              </div>
            </div>


            <div id="gender">
              <div className="form-group">
                <div className="col-sm-offset-2 col-sm-10">
                  <h4>What is your gender?</h4>  
                </div>
              </div>

              <div className="form-group">
                <div className="col-sm-offset-2 col-sm-10">
                  <div className="radio">
                    <label><input type="radio" name="gender" onChange={this.setGender.bind(this,'Female')}/> Female</label>
                  </div>
                </div>
              </div>
              <div className="form-group">
                <div className="col-sm-offset-2 col-sm-10">
                  <div className="radio">
                    <label><input type="radio" name="gender" onChange={this.setGender.bind(this,'Male')}/> Male</label>
                  </div>
                </div>
              </div>
              <div className="form-group">
                <div className="col-sm-offset-2 col-sm-10">
                  <div className="radio">
                    <label><input type="radio" name="gender" onChange={this.setGender.bind(this,'Prefer not to say')}/> Prefer not to say</label>
                  </div>
                </div>
              </div>

              <div className="form-group">
                <div className="col-sm-offset-2 col-sm-10">
                  <div className="radio">
                    <label><input type="radio" name="gender" onChange={this.setGender.bind(this,-1)}/>Other</label>
                    <input type="text" class="form-inline" id="other1" onChange={this.onChangeTextBoxGender.bind(this)}/>
                  </div>
                </div>
              </div>
            </div>

              <button type="button" class="btn btn-success" onClick={this.savedata.bind(this)}>Submit</button>
              <button type="button" class="btn btn-danger">Clear input</button>

          </form>
        </div>

      </div>
    );
  }
}

export default ContactForm;

看截图：

Answer 1

为您的单选按钮提供一个选中的属性。 改变

<label>
  <input 
    type="radio" 
    name="age" 
    onChange={this.setAge.bind(this,'>=25 yrs')} /> 
  {' '}      
  >=25 yrs
</label>

到

<label>
  <input 
    type="radio" 
    name="age" 
    checked={(this.state.age == '>=25 yrs')} 
    onChange={this.setAge.bind(this,'>=25 yrs')}/> 
  >=25 yrs
</label>

Answer 2

您可以在 find 和 example 下方使用 state 控制选择的内容（顺便说一句，在渲染函数中生成函数不是一个好习惯，因为它会导致不必要的重新渲染）

class App extends React.Component {
  state = {
    selectedValue : ''
  }

  optionSelected = (e) => {
    console.log(e.target.value)
    this.setState({
      selectedValue : e.target.value
    })
  }

  reset = (e) => {
    this.setState({
      selectedValue : ''
    })
  }

  render () {
    const { selectedValue } = this.state;
    return (
      <div>
        <div>
         <input 
            type="radio" 
            name="age" value="A" 
            onChange={this.optionSelected}
            checked={selectedValue === 'A'}/> A
        </div>
        <div>
         <input 
            type="radio" 
            name="age" 
            value="B" 
            onChange={this.optionSelected}
            checked={selectedValue === 'B'}/> B
        </div>
        <div>
         <input 
            type="radio" 
            name="age" 
            value="C" 
            onChange={this.optionSelected}
            checked={selectedValue === 'C'}/> C
        </div>

        <button onClick={this.reset}>reset</button>
      </div>
    );
  }
}

ReactDOM.render(<App/>, document.querySelector('#root'))

演示

Answer 3

您正在触发 onChange 处理程序，正确更新state ，但您实际上并未使用此数据控制组件。 这是一份来自 react 的深入指南，关于不受控制的组件，以及推荐的方法，表单中的受控组件。

在您的组件中，您需要根据this.state的值手动设置每个无线电输入的checked道具。 例如：

render() {
  // here you extract the data from the state
  const age = this.state.age
  const gender = this.state.gender
  ...
  <div className="radio">
    <label><input type="radio" name="gender" onChange={this.setGender.bind(this,'Female')} checked={gender === 'Female'}/> Female</label>
  </div>
  ... // and set checked for every input, using the age for the age radio buttons
 }

因此，像这样控制组件，当您调用reset ，所有输入都会将checked道具设置为 false，并且不会被标记。

Answer 4

在 ReactJS 中：

inputs可以通过它们的value / checked props来controlled 。

这些props通常通过this.state进行管理。

controlled components的替代品是uncontrolled components 。

有关如何基于Sections Array动态构建controlled components的radio form的实际示例，请参见下文。

 // Sections. const sections = [ { id: 'age', name: 'Age', options: [ '20 - 30', '30 - 40', 'Other' ] }, { id: 'gender', name: 'Gender', options: [ 'Male', 'Female', 'Other' ] } ] // Radio Box class RadioBox extends React.Component { // Constructor. constructor(props) { super(props) this.initialState = sections.reduce((state, section) => ({...state, [section.id]: false}), {}) this.state = this.initialState } // Render. render = () => ( <form onSubmit={this.submit}> {sections.map((section, index) => ( <div key={index}> <span>{section.name}</span> <ul> {section.options.map((option, index) => this.option(section.id, option, index))} </ul> <button type="button" onClick={() => this.setState({[section.id]: false})}>Reset {section.name}</button> </div> ))} <button>Submit</button> <button type="button" onClick={() => this.setState({...this.initialState})}>Clear form</button> </form> ) // Submit. submit = (event) => { event.preventDefault() console.log('Data:', this.state) } // Option. option = (id, option, index) => ( <li key={index}> <label>{option}</label> <input type="radio" checked={this.state[id] == option} onChange={(event) => event.target.checked && this.setState({[id]: option})}/> </li> ) } // Mount. ReactDOM.render(<RadioBox/>, document.querySelector('#root'))

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="root"></div>

Answer 5

在这种情况下，您可以使用简单的 jquery 选择器来选择要清除的值，因此您的重置函数将执行以下操作：

$('input[name="age"]').attr('checked', false);

Answer 6

您可以在输入标签中添加checked属性

<input checked={your condition paste here} />

例如：

<Input type="radio" name="gender" value="male" checked={this.state.gender === "male"} />