javascript - 如何使单选按钮工作并在reactjs中输出值
问题描述
我试图让单选按钮在单击它们时变为蓝色,但由于某种未知原因,它没有。
我试过删除 value 属性, name 属性,但它不起作用。
constructor() {
super()
this.state = {
firstName: '',
lastName: '',
Age: '',
Gender: '',
isSubmitted: false
}
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event){
const {name, value, type, checked} = event.target
type === "checkbox" ?
this.setState({ [name]: checked })
: this.setState({ [name]: value })
this.setState({
isSubmitted: false
})
}
handleSubmit(event){
this.setState({isSubmitted:true})
event.preventDefault();
}
render() {
return (
<main>
<form onSubmit={this.handleSubmit}>
<input
type="text"
name="firstName"
value={this.state.firstName}
placeholder="First Name"
onChange={this.handleChange}/>
<br />
<input name="lastName" value={this.state.lastName}
placeholder="Last Name"
onChange={this.handleChange}/><br />
<input type="number" name="Age" value={this.state.Age}
placeholder="Age" onChange={this.handleChange}/><br />`
<label>
<input
type="radio"
name="gender"
value="male"
checked={this.state.Gender == "Male"}
onChange={this.handleChange}
/> Male<br />
</label>
<label>
<input
type="radio"
name="gender"
checked={this.state.Gender == "Female"}
value="female"
onChange={this.handleChange}
/> Female <br /> <br />
</label>
<button>Submit</button>
</form>
<hr />
<h2>Entered information:</h2>
{ this.state.isSubmitted == true ?
<div> <p> Your name: {this.state.firstName}
{this.state.lastName }</p>
<p> Your age: {this.state.Age} </p>
<p> Your gender: {this.state.Gender} </p> </div>
: <div> </div>
}
</main>
)
}
我希望单选按钮可以单击,并将您单击的值输出到屏幕上。相反,它只显示性别旁边的任何内容。
解决方案
您有一些拼写错误、变量名称不一致和错误逻辑handleChange
:
import React from 'react';
export default class App extends React.Component {
state = {
firstName: '',
lastName: '',
Age: '',
gender: '',
isSubmitted: false
};
handleChange = event => {
const { name, value } = event.target;
console.log(event.target);
this.setState({ [name]: value });
};
handleSubmit = event => {
this.setState({ isSubmitted: true });
event.preventDefault();
};
render() {
return (
<main>
<form onSubmit={this.handleSubmit}>
<input
type="text"
name="firstName"
value={this.state.firstName}
placeholder="First Name"
onChange={this.handleChange}
/>
<br />
<input
name="lastName"
value={this.state.lastName}
placeholder="Last Name"
onChange={this.handleChange}
/>
<br />
<input
type="number"
name="Age"
value={this.state.Age}
placeholder="Age"
onChange={this.handleChange}
/>
<br />
<label>
<input
type="radio"
name="gender"
value="male"
checked={this.state.gender === 'male'}
onChange={this.handleChange}
/>{' '}
Male
<br />
</label>
<label>
<input
type="radio"
name="gender"
checked={this.state.gender === 'female'}
value="female"
onChange={this.handleChange}
/>{' '}
Female <br /> <br />
</label>
<button>Submit</button>
</form>
<hr />
<h2>Entered information:</h2>
{this.state.isSubmitted === true ? (
<div>
{' '}
<p>
{' '}
Your name: {this.state.firstName}
{this.state.lastName}
</p>
<p> Your age: {this.state.Age} </p>
<p> Your gender: {this.state.gender} </p>{' '}
</div>
) : (
<div> </div>
)}
</main>
);
}
}
推荐阅读
- javascript - 使用 Node JS 将多个数组转换为对象到一个数组
- django-rest-framework - 如何在 django 的一个序列化程序中拥有两个模型
- c# - WPF 应用程序无法在 Windows 7 Embedded 上启动 - 如何跟踪原因
- c# - Firefox 中的 ASP.NET Core 自签名证书不起作用
- http - TLS 对 http 协议有影响吗?
- java - 共享 Java 文件,Mac 替代 .bat 打开 jar
- javascript - 如何在谷歌地图Javascript api中将标记限制为特定城市?
- javascript - 通过给定的一个获取另一个 JSON 对象属性
- powershell - API 网关的 Powershell 2.0 Web 请求替代方案
- django - 更改表单/表单集错误消息