He hecho 4 botones de radio para 1 pregunta. He realizado 2 botones de envío y entrada clara. Cuando envío el formulario después de hacer clic en borrar entrada, no borra los botones marcados para desmarcar cómo puedo hacerlo usando reset función?

Contactform.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;

Ver capturas de pantalla:

enter image description here

enter image description here

4
stone rock 26 feb. 2018 a las 05:16

6 respuestas

La mejor respuesta

Dé un atributo marcado para su botón de radio. Cambio

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

Para

<label><input type="radio" name="age" checked={(this.state.age == '>=25 yrs')} onChange={this.setAge.bind(this,'>=25 yrs')}/> >=25 yrs</label>
5
Ayon Saha 26 feb. 2018 a las 03:04

Está activando un controlador onChange, actualizando state correctamente, pero en realidad no está controlando los componentes con estos datos. Aquí hay una guía detallada sobre cómo reaccionar sobre Componentes no controlados, y el enfoque recomendado, < a href = "https://reactjs.org/docs/forms.html" rel = "nofollow noreferrer"> Componentes controlados en formularios.

En su componente, debe configurar manualmente los accesorios checked de cada entrada de radio en función del valor de this.state. Por ejemplo:

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
 }

Por lo tanto, controlando los componentes así, cuando llame a reset, todas las entradas tendrán los checked accesorios configurados como falsos y quedarán sin marcar.

1
rodgobbi 26 feb. 2018 a las 02:55

Puede controlar lo que se selecciona usando el estado, debajo de find y example (por cierto, no es una buena práctica generar funciones dentro de la función de render porque causará reenvíos innecesarios)

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'))

Demo

1
AngelSalazar 26 feb. 2018 a las 03:05

Puede agregar la propiedad checked dentro de su etiqueta de entrada

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

Por ejemplo:

<Input type="radio" name="gender" value="male" checked={this.state..gender === "male"} />
0
Lahiru Amarathunge 22 dic. 2019 a las 04:56

En ReactJS:

inputs puede ser controlled a través de su value / checked props.

Estos props generalmente se administran a través de this.state.

La alternativa a controlled components es uncontrolled components.

Vea a continuación un ejemplo práctico de cómo construir dinámicamente un radio form de controlled components basado en un Array de Sections.

// 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>
1
Arman Charan 26 feb. 2018 a las 03:37

En este caso, puede usar selectores jquery simples para seleccionar el valor que desea borrar, por lo que su función de reinicio haría algo como esto:

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

0
Ariel Salem 26 feb. 2018 a las 02:45