Reactjs：獲取單選按鈕的價值

Question

我正在開發一個簡單的民意調查，以此作爲我在reactjs上發展的方式。到目前爲止，我想出了以下幾點：

//App.js 
import React, { Component } from 'react'; 
import './App.css'; 

const PollOption = ({options}) => { 


return (
    <div className="pollOption"> 
     {options.map((choice, index) => (
     <label key={index}> 
     <input type="radio" 
       name="vote" 
       value={choice.value} 
       key={index} 
       defaultChecked={choice.value} 
       onChange={() => this.props.onChange()}/> 
       {choice.text} 
     </label> 
    ))} 
    </div> 
    ); 
}; 



class OpinionPoll extends Component{ 
    constructor(props) { 
    super(props); 
    this.state = {selectedOption: ''} 
    } 

    handleClick(){ 
    console.log('button clicked'); 
    } 

    handleOnChange(){ 
    console.log('foo'); 
    } 

    render(){ 
    return (
     <div className="poll"> 
     {this.props.model.question} 
     <PollOption 
      options={this.props.model.choices} 
      onChange={() => this.handleOnChange()}/> 

     <button onClick={() => this.handleClick()}>Vote!</button> 
     </div> 
    ); 
    } 
} 


    export default OpinionPoll; 

    //index.js 
    var json = { 
      question: 'Do you support cookies in cakes?', 
      choices: 
      [ 
       {text: "Yes", value: 1}, 
       {text: "No", value: 2} 
      ] 
     } 
    const root = document.getElementById("root"); 
    render(<OpinionPoll model ={json} />, root) 

我想要單擊按鈕時獲取單選按鈕的值。

Answer 1

只需少許修改的@Shubham卡特里答案添加checked屬性，選擇狀態。演示在這裏：https://codesandbox.io/s/vqz25ov285

const json = { 
    question: 'Do you support cookies in cakes?', 
    choices: 
    [ 
    { text: 'Yes', value: '1' }, 
    { text: 'No', value: '2' } 
    ] 
} 

const PollOption = ({ options, selected, onChange }) => { 
    return (
    <div className="pollOption"> 
     {options.map((choice, index) => (
     <label key={index}> 
      <input type="radio" 
      name="vote" 
      value={choice.value} 
      key={index} 
      checked={selected === choice.value} 
      onChange={onChange} /> 
      {choice.text} 
     </label> 
    ))} 
    </div> 
); 
}; 

class OpinionPoll extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { selectedOption: '' } 
    } 

    handleClick() { 
    console.log('submitted option', this.state.selectedOption); 
    } 

    handleOnChange(e) { 
    console.log('selected option', e.target.value); 
    this.setState({ selectedOption: e.target.value}); 
    } 

    render() { 
    return (
     <div className="poll"> 
     {this.props.model.question} 
     <PollOption 
      options={this.props.model.choices} 
      onChange={(e) => this.handleOnChange(e)} 
      selected={this.state.selectedOption} /> 
     <button onClick={() => this.handleClick()}>Vote!</button> 
     </div> 
    ); 
    } 
} 

render(<OpinionPoll model={json} />, document.getElementById('root')); 

Answer 2

PollOption是一個功能組件，因此this關鍵字不是無法訪問它，所以onChange={() => this.props.onChange()}將無法​​正常工作。您還需要將選定的值傳遞給父代。

也作爲@RickyJolly在評論中提到您需要checked屬性onChange被觸發。

const PollOption = ({options, onChange, selectedValue}) => { 
    return (
    <div className="pollOption"> 
     {options.map((choice, index) => (
     <label key={index}> 
     <input type="radio" 
       name="vote" 
       value={choice.value} 
       key={index} 
       checked={selectedValue === choice.value} 
       onChange={(e) => onChange(e.target.value)}/> 
       {choice.text} 
     </label> 
    ))} 
    </div> 
    ); 
}; 

class OpinionPoll extends Component{ 
    constructor(props) { 
    super(props); 
    this.state = {selectedOption: ''} 
    } 

    handleClick(){ 
    console.log('button clicked'); 
    } 

    handleOnChange(val){ 
    console.log('foo', val); 
    } 

    render(){ 
    return (
     <div className="poll"> 
     {this.props.model.question} 
     <PollOption 
      options={this.props.model.choices} 
      onChange={(val) => this.handleOnChange(val)} 
      selectedValue={this.state.selectedOption} 
     /> 

     <button onClick={() => this.handleClick()}>Vote!</button> 
     </div> 
    ); 
    } 
}