[英]Make a React.js radio button that disable and enable another input (classes)
I have this React.js 'contact-us' code.我有这个 React.js 'contact-us' 代码。 I made a three radio buttons but they don't work.
我制作了三个单选按钮,但它们不起作用。 I want to make the select input disabled until I click on a specific radio button 'intrests in service'.
我想禁用 select 输入,直到我单击特定的单选按钮“服务中”。 When I click it: the select input will be enabled, else it stays disabled.
当我点击它时:select 输入将被启用,否则它将保持禁用状态。
PS: I do not use function components, all in a class. PS:我没有使用function元件,都在一个class。
render() {
const { formErrors } = this.state;
return (
<div className='row'>
<div className='col-6'>
<h> Your Intrest : </h>
<div className='radio-btn'>
<label>
<input
type='radio'
name='service'
value={this.state.subject}
className={`for formInput ${formErrors.subject != 0 ? 'error' : null}`}
onChange={this.handleChange}
placeholder='Service'
noValidate
/> intrest in service. </label>
</div>
<div className='radio-btn'>
<label>
<input
type='radio'
name='team'
value={this.state.subject}
className={`for formInput ${formErrors.subject != 0 ? 'error' : null}`}
onChange={this.handleChange}
placeholder='Team'
noValidate
/> Join to our team. </label>
</div>
<div className='radio-btn'>
<label>
<input
type='radio'
name='another'
value={this.state.subject}
className={`for formInput ${formErrors.subject != 0 ? 'error' : null}`}
onChange={this.handleChange}
placeholder='Another'
noValidate
/> Another help.</label>
</div>
{formErrors.subject == 0 && (
<span className='errorMessage'>{formErrors.subject}</span>
)}
</div>
<div className='col-6'>
<h> Select Service: </h>
<select
type='select'
name='service'
value={this.state.service}
className={`form-control formInput ${formErrors.service.length > 0 ? 'error' : null}`}
onChange={this.handleChange}
placeholder='Service'
noValidate
disabled
>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
{formErrors.service.length > 0 && (
<span className='errorMessage'>{formErrors.service}</span>
)}
</div>
...
handleChange
method: handleChange
方法:
handleChange = (e) => {
e.preventDefault();
const { name, value } = e.target;
let formErrors = { ...this.state.formErrors };
case 'subject':
formErrors.subject = value.length < 1 ? 'Please enter a subject.' : '';
break;
case 'service':
formErrors.service = value.length < 1 ? 'Please enter a service.' : '';
break;
this.setState({ formErrors, [name]: value });
};
You need to update your radio buttons.您需要更新单选按钮。 The
name
of every radio button should be the same, this way you know that these belong to the same "group".每个单选按钮的
name
应该相同,这样您就知道它们属于同一个“组”。 The value
is the value you want to store in your state.该
value
是您要存储在 state 中的值。
You also need to add a checked
prop.您还需要添加一个
checked
的道具。 You set it true
if the current input
is the checked one and the one stored in your state.如果当前
input
是选中的输入并且存储在 state 中,则将其设置为true
。
If the state is correctly handled, you can check if the subject is the one required and disable the select
field based on the state.如果 state 处理正确,您可以根据 state 检查主题是否为必填项并禁用
select
字段。
Check the snippet below and click on "Run code snippet", it should work as you described.检查下面的代码片段并单击“运行代码片段”,它应该可以按照您的描述工作。
class App extends React.Component { constructor() { super(); this.state = { service: "", subject: "" }; } handleChange = (e) => { this.setState({ [e.target.name]: e.target.value }); }; render() { return ( <div className="App"> <form> <fieldset> <label> <input type="radio" name="subject" checked={this.state.subject === "interest"} onChange={this.handleChange} value="interest" />{" "} Interest in service </label> <label> <input type="radio" name="subject" checked={this.state.subject === "join team"} onChange={this.handleChange} value="join team" />{" "} Join to our team </label> <label> <input type="radio" name="subject" checked={this.state.subject === "another"} onChange={this.handleChange} value="another" /> Another help </label> </fieldset> <label> Select Service: <select type="select" name="service" disabled={this.state.subject.== "interest"} onChange={this.handleChange} value={this.state;service} > <option>1</option> <option>2</option> <option>3</option> </select> </label> </form> </div> ). } } ReactDOM,render(<App />. document.getElementById('root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.