reactjs - 如何在 React JS 中隐藏/显示提交按钮
问题描述
我对 React JS 完全陌生,我不知道如何在 ReactJS 中做。
我最初必须隐藏提交按钮,当键入日期字段时,应该显示提交按钮。
class MyForm extends React.Component {
constructor(props) {
super(props);
this.state = { startdate: '', enddate: '' };
}
mySubmitHandler = (event) => {
event.preventDefault();
alert("You are submitting " + this.state.startdate +"and"+ this.state.enddate);
}
myChangeHandler = (event) => {
this.setState({startdate: event.target.value});
}
myEndDate = (event) => {
this.setState({enddate: event.target.value});
}
render() {
return (
<form onSubmit={this.mySubmitHandler}>
<img src="C:\\Users\\A9002255\\Desktop\is.jpg"></img>
<h2>Please select the Date range of .CSV </h2>
<input
type='date'
onChange={this.myChangeHandler}
/>
<span> </span>
<input
type="date"
onChange={this.myEndDate}
/>
<div>
<input
type='submit' value="Download" class="bi bi-cloud-arrow-down" style={{ width: '10%', height: 30}}
/>
</div>
</form>
);
}
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
export default MyForm;
解决方案
您可以根据您所在州的开始和结束日期添加检查。试试下面的代码
class MyForm extends React.Component {
constructor(props) {
super(props);
this.state = { startdate: '', enddate: '' };
}
mySubmitHandler = (event) => {
event.preventDefault();
alert("You are submitting " + this.state.startdate +"and"+ this.state.enddate);
}
myChangeHandler = (event) => {
this.setState({startdate: event.target.value});
}
myEndDate = (event) => {
this.setState({enddate: event.target.value});
}
render() {
return (
<form onSubmit={this.mySubmitHandler}>
<img src="C:\\Users\\A9002255\\Desktop\is.jpg"></img>
<h2>Please select the Date range of .CSV </h2>
<input
type='date'
onChange={this.myChangeHandler}
/>
<span> </span>
<input
type="date"
onChange={this.myEndDate}
/>
<div>
{this.state.startdate && this.state.enddate && <input
type='submit' value="Download" class="bi bi-cloud-arrow-down" style={{ width: '10%', height: 30}}
/>}
</div>
</form>
);
}
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
export default MyForm;
推荐阅读
- xslt - 通过 xslt 转换时的实体问题
- android - 使用 Dagger 2 进行依赖注入
- python - 根据特定列值python删除csv中的行
- hex - Hex.encodeHexString(byte[] hexStringByteArray); 的问题
- sql - 如何通过在特定列中使用不同的值来执行结果限制?
- c# - 是否有将 DataRow 映射到类对象的方法
- c++ - 如何更改 QFileDialog 窗口的图标
- mongodb - MongoDB Aggregation SUM Array of Arrays by object key
- javascript - Javascript 返回 System.InvalidOperationException: Unexpected new line Error
- xslt-1.0 - XSL 通过拆分元素的值来替换元素