Wahre und falsche Radiobuttons in

Question

Hier reagieren ist meine aktuellen Code:

Der Zustand, in meiner Komponente

this.state = { 
      name: '', 
      sample: '', 
      description: '', 
      isPublished: null, 

     }; 

Hier wird der Handler für die Radio-Buttons

_handleRadio(event) { 
let value = true; 
if (typeof event.currentTarget.value === 'string') { 
    (event.currentTarget.value === 'true' ? value = true : value = false); 
} 
this.setState({isPublished: value}); 
} 

Und schließlich hier sind meine Optionsfelder

<div className="radio"> 
         <label><input type="radio" name="isPublished" value="true" onChange={this._handleRadio} />Yes</label> 
        </div> 
        <div className="radio"> 
         <label><input type="radio" name="isPublished" value="false" onChange={this._handleRadio} />No</label> 
        </div> 

Entschuldigung für die schlechte Formatierung, das Kopieren und Einfügen meines Codes hier ist nicht so gut gelaufen. Wenn ich versuche, es zu reparieren, mache ich es noch mehr durcheinander.

Also gerade jetzt, wie es ist, wird der Zustand geändert, was genau das ist, was ich will. Aber wenn ich die POST-Anfrage an meine API sende und mache, kehrt der isPublished-Status zu true zurück.

Hier ist meine einreichen Handler

_handleSubmit(event) { 
     event.preventDefault(); 
     event.stopPropagation(); 
     const sampleObj = this.state; 
     console.log(sampleObj); 

     api.post('samples', sampleObj).done((result) => { 
      console.log('Sample Saved!'); 
      this.context.router.push(`${result.id}/`); 
     }).fail((error) => { 
      console.log('failed'); 
      console.log(error); 
     }); 
    } 

Warum hat der Staat von isPublished Rückkehr zu wahren während der einreichen, auch nachdem er auf false zu ändern?

Answer 1

Ich denke, dass es ein paar strukturelle Probleme gibt. Es ist schwer, ohne einen Behälter zu sagen, aber hier ist, was ich sehe ...

Zuerst mischen Sie unkontrollierte Komponenten mit kontrollierten Methoden. Z. B. setzen Sie das überprüfte Attribut nicht auf die Optionsschaltflächen (gesteuert), aber Sie überprüfen auch nicht die Referenzen (oder setzen diese) auf Werte (unkontrolliert). Es sollte ein geprüftes Attribut für controlled geben.

Zweitens gibt es eine Menge String zu Boolean Mismatching. Unter der Annahme, dass nur die Werte für diese Tasten wahr und falsch sind, versuchen Sie:

const isPublished = event.currentTarget.value === 'true' ? true: false; 

Ich habe es in einem Stift zusammen.

https://codepen.io/anon/pen/pNooXq?editors=0010

class Form extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
      name: '', 
      sample: '', 
      description: '', 
      isPublished: null, 

     }; 
    this._handleRadio = this._handleRadio.bind(this); 
    this._handleSubmit = this._handleSubmit.bind(this); 
    } 

    _handleRadio(event) { 
    const isPublished = event.currentTarget.value === 'true' ? true: false; 
    console.log('handle', isPublished); 
    this.setState({ isPublished }); 
    } 
    _handleSubmit(event) { 
     event.preventDefault(); 
     event.stopPropagation(); 
     const sampleObj = this.state; 
     console.log(sampleObj); 
    } 

    render() { 
    const { isPublished } = this.state; 
    console.log(isPublished, true); 
    return (
     <form onSubmit={this._handleSubmit}> 
     <div className="radio"> 
      <label> 
      <input 
       type="radio" 
       name="isPublished" 
       value="true" 
       checked={isPublished === true} 
       onChange={this._handleRadio} /> 
      Yes 
      </label> 
     </div> 
     <div className="radio"> 
     <label> 
      <input 
      type="radio" 
      name="isPublished" 
      value="false" 
      checked={isPublished === false} 
      onChange={this._handleRadio} /> 
      No 
     </label> 
     </div> 
     <button type="submit">Submit</button> 
    </form> 
    ); 
    } 
} 

Answer 2

ich Ihre tatsächliche JSX nicht sehen können, aber Sie werden die geprüft Attribut in dem entsprechenden Radiobutton festlegen müssen, wenn man sich den aktuellen Zustand reflektieren will?

Also, so etwas wie:

checked={this.state.isPublished === true} 

für das erste Optionsfeld;

checked={this.state.isPublished === false} 

für die Sekunde.