如何在ReactJS中使用单选按钮?

小开

单击单选按钮应该触发一个事件，其中之一:

如果只希望选择知识是本地的，则调用setState
调用从self.props.selectionChanged(...)上面传入的回调函数

在第一种情况下，状态的改变将触发重新渲染，您可以执行
<td>chosen site name {this.state.chosenSiteName} </td> < / p >

在第二种情况下，回调的源将更新内容，以确保您的SearchResult实例将有chosenSiteName和chosenAddress设置在它的props中。

小开

最佳答案

对渲染的任何更改都应该通过state或props (反应医生)进行更改。

所以在这里，我注册了输入事件，然后更改state，这将触发渲染显示在页脚上。

var SearchResult = React.createClass({
getInitialState: function () {
return {
site: '',
address: '',
};
},
onSiteChanged: function (e) {
this.setState({
site: e.currentTarget.value,
});
},


onAddressChanged: function (e) {
this.setState({
address: e.currentTarget.value,
});
},


render: function () {
var resultRows = this.props.data.map(function (result) {
return (
<tbody>
<tr>
<td>
<input
type="radio"
name="site_name"
value={result.SITE_NAME}
checked={this.state.site === result.SITE_NAME}
onChange={this.onSiteChanged}
/>
{result.SITE_NAME}
</td>
<td>
<input
type="radio"
name="address"
value={result.ADDRESS}
checked={this.state.address === result.ADDRESS}
onChange={this.onAddressChanged}
/>
{result.ADDRESS}
</td>
</tr>
</tbody>
);
}, this);
return (
<table className="table">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
{resultRows}
<tfoot>
<tr>
<td>chosen site name {this.state.site} </td>
<td>chosen address {this.state.address} </td>
</tr>
</tfoot>
</table>
);
},
});

jsbin .

小开

我也搞混了无线电，复选框的实现。我们需要的是，监听收音机的变化事件，然后设置状态。我举了一个性别选择的小例子。

/*
* A simple React component
*/
class App extends React.Component {
constructor(params) {
super(params)
// initial gender state set from props
this.state = {
gender: this.props.gender
}
this.setGender = this.setGender.bind(this)
}
  

setGender(e) {
this.setState({
gender: e.target.value
})
}
  

render() {
const {gender} = this.state
return  <div>
Gender:
<div>
<input type="radio" checked={gender == "male"}
onClick={this.setGender} value="male" /> Male
<input type="radio" checked={gender == "female"}
onClick={this.setGender} value="female"  /> Female
</div>
{ "Select Gender: " } {gender}
</div>;
}
}


/*
* Render the above component into the div#app
*/
ReactDOM.render(<App gender="male" />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

小开

这里只是一个想法:当涉及到React中的无线电输入时，我通常以一种不同的方式渲染它们，这在前面的回答中提到过。

如果这可以帮助任何需要渲染大量单选按钮的人:

import React from "react"
import ReactDOM from "react-dom"


// This Component should obviously be a class if you want it to work ;)


const RadioInputs = (props) => {
/*
[[Label, associated value], ...]
*/
  

const inputs = [["Male", "M"], ["Female", "F"], ["Other", "O"]]
  

return (
<div>
{
inputs.map(([text, value], i) => (
<div key={ i }>
<input type="radio"
checked={ this.state.gender === value }
onChange={ /* You'll need an event function here */ }
value={ value } />
{ text }
</div>
))
}
</div>
)
}


ReactDOM.render(
<RadioInputs />,
document.getElementById("root")
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


<div id="root"></div>

小开

下面是在react js中实现单选按钮的最简单方法。

class App extends React.Component {
  

setGender(event) {
console.log(event.target.value);
}
  

render() {
return (
<div onChange={this.setGender.bind(this)}>
<input type="radio" value="MALE" name="gender"/> Male
<input type="radio" value="FEMALE" name="gender"/> Female
</div>
)
}
}


ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

编辑

你可以使用箭头函数代替绑定。将上面的代码替换为

<div onChange={event => this.setGender(event)}>

默认值使用defaultChecked，如下所示

<input type="radio" value="MALE" defaultChecked name="gender"/> Male

小开

根据陈康的回答，我有一个更干练的方法给感兴趣的人:

class RadioExample extends React.Component {
constructor(props) {
super(props);


this.state = {
selectedRadio: 'public'
};
}


handleRadioChange = (event) => {
this.setState({
selectedRadio: event.currentTarget.value
})
};


render() {
return (
<div className="radio-row">
<div className="input-row">
<input
type="radio"
name="public"
value="public"
checked={this.state.selectedRadio === 'public'}
onChange={this.handleRadioChange}
/>
<label htmlFor="public">Public</label>
</div>
<div className="input-row">
<input
type="radio"
name="private"
value="private"
checked={this.state.selectedRadio === 'private'}
onChange={this.handleRadioChange}
/>
<label htmlFor="private">Private</label>
</div>
</div>
)
}
}

除了这个会有一个默认的选中值。

小开

使无线电组件为哑巴组件和通过道具从父。

import React from "react";


const Radiocomponent = ({ value, setGender }) => (
<div onChange={setGender.bind(this)}>
<input type="radio" value="MALE" name="gender" defaultChecked={value ==="MALE"} /> Male
<input type="radio" value="FEMALE" name="gender" defaultChecked={value ==="FEMALE"}/> Female
</div>
);


export default Radiocomponent;

它很容易测试，因为它是一个哑组件(一个纯函数)。

小开

基于React Docs说:

处理多输入。 当您需要处理多个受控输入元素时，您可以为每个元素添加一个name属性，并让处理程序函数根据event.target.name.
的值选择要做什么

例如:

class App extends React.Component {
constructor(props) {
super(props);
this.state = {};
}


handleChange = e => {
const { name, value } = e.target;


this.setState({
[name]: value
});
};


render() {
return (
<div className="radio-buttons">
Windows
<input
id="windows"
value="windows"
name="platform"
type="radio"
onChange={this.handleChange}
/>
Mac
<input
id="mac"
value="mac"
name="platform"
type="radio"
onChange={this.handleChange}
/>
Linux
<input
id="linux"
value="linux"
name="platform"
type="radio"
onChange={this.handleChange}
/>
</div>
);
}
}

链接到示例:https://codesandbox.io/s/6l6v9p0qkr

一开始，任何单选按钮都没有被选中，因此this.state是一个空对象，但每当单选按钮被选中时，this.state都会获得一个包含输入名称及其值的新属性。然后很容易检查用户是否选择了任何单选按钮，如:

const isSelected = this.state.platform ? true : false;

编辑:

在React的16.7-alpha版本中，有是一个建议的一些叫做hooks的东西，它会让你更容易地做这些事情:

在下面的例子中，一个功能组件中有两组单选按钮。尽管如此，他们还是有可控的输入:

function App() {
const [platformValue, plaftormInputProps] = useRadioButtons("platform");
const [genderValue, genderInputProps] = useRadioButtons("gender");
return (
<div>
<form>
<fieldset>
Windows
<input
value="windows"
checked={platformValue === "windows"}
{...plaftormInputProps}
/>
Mac
<input
value="mac"
checked={platformValue === "mac"}
{...plaftormInputProps}
/>
Linux
<input
value="linux"
checked={platformValue === "linux"}
{...plaftormInputProps}
/>
</fieldset>
<fieldset>
Male
<input
value="male"
checked={genderValue === "male"}
{...genderInputProps}
/>
Female
<input
value="female"
checked={genderValue === "female"}
{...genderInputProps}
/>
</fieldset>
</form>
</div>
);
}


function useRadioButtons(name) {
const [value, setState] = useState(null);


const handleChange = e => {
setState(e.target.value);
};


const inputProps = {
name,
type: "radio",
onChange: handleChange
};


return [value, inputProps];
}

工作示例:https://codesandbox.io/s/6l6v9p0qkr

小开

import React, { Component } from "react";


class RadionButtons extends Component {
constructor(props) {
super(props);


this.state = {
// gender : "" , // use this one if you don't wanna any default value for gender
gender: "male" // we are using this state to store the value of the radio button and also use to display the active radio button
};


this.handleRadioChange = this.handleRadioChange.bind(this);  // we require access to the state of component so we have to bind our function
}


// this function is called whenever you change the radion button
handleRadioChange(event) {
// set the new value of checked radion button to state using setState function which is async funtion
this.setState({
gender: event.target.value
});
}




render() {
return (
<div>
<div check>
<input
type="radio"
value="male" // this is te value which will be picked up after radio button change
checked={this.state.gender === "male"} // when this is true it show the male radio button in checked
onChange={this.handleRadioChange} // whenever it changes from checked to uncheck or via-versa it goes to the handleRadioChange function
/>
<span
style=\{\{ marginLeft: "5px" }} // inline style in reactjs
>Male</span>
</div>
<div check>
<input
type="radio"
value="female"
checked={this.state.gender === "female"}
onChange={this.handleRadioChange}
/>
<span style=\{\{ marginLeft: "5px" }}>Female</span>
</div>
</div>
);
}
}
export default RadionButtons;

小开

我们是这样做的:


export default function RadioButton({ onChange, option }) {
const handleChange = event => {
onChange(event.target.value)
}


return (
<>
<div className="custom-control custom-radio">
<input
type="radio"
id={ option.option }
name="customRadio"
className="custom-control-input"
onChange={ handleChange }
value = { option.id }
/>
<label
className="custom-control-label"
htmlFor={ option.option }
>
{ option.option }
</label>
</div>
</>
)
}

小开

@Tomasz Mularczyk在他的回答中提到了react钩子，但我想我应该加入一个我最近使用的解决方案，只使用useState钩子。

function Radio() {
const [currentRadioValue, setCurrentRadioValue] = useState()


const handleRadioChange = (e) => {
setCurrentValue(e.target.value);
};


return (
<>
<div>
<input
id="radio-item-1"
name="radio-item-1"
type="radio"
value="radio-1"
onChange={handleRadioChange}
checked={currentRadioValue === 'radio-1'}
/>
<label htmlFor="radio-item-1">Radio Item 1</label>
</div>
<div>
<input
id="radio-item-2"
name="radio-item-2"
type="radio"
value="radio-2"
onChange={handleRadioChange}
checked={currentRadioValue === 'radio-2'}
/>
<label htmlFor="radio-item-2">
Radio Item 1
</label>
</div>
</>
);
}

小开

这是我用的。

const [variableName, setVariableName] = useState("");

然后，我们将需要实际的单选按钮。

<input
type="radio"
name="variableName"
value="variableToCheck"
onChange={(e) =>
setVariableName("variableToCheck")
}
checked={variableName === "variableToCheck"}
/>

小开

import React from 'react';
import './style.css';


export default function App() {
const [currentRadioValue, setCurrentValue] = React.useState('on');
const handleRadioChange = value => {
setCurrentValue(value);
};
return (
<div>
<>
<div>
<input
name="radio-item-1"
value="on"
type="radio"
onChange={e => setCurrentValue(e.target.value)}
defaultChecked={currentRadioValue === 'on'}
/>
<label htmlFor="radio-item-1">Radio Item 1</label>
{currentRadioValue === 'on' && <div>one</div>}
</div>
<div>
<input
name="radio-item-1"
value="off"
type="radio"
onChange={e => setCurrentValue(e.target.value)}
defaultChecked={currentRadioValue === 'off'}
/>
<label htmlFor="radio-item-2">Radio Item 2</label>
{currentRadioValue === 'off' && <div>two</div>}
</div>
</>
</div>
);
}

工作示例:https://stackblitz.com/edit/react-ovnv2b