Блог

Главная - Вопросы по программированию - как скрыть/отобразить кнопку отправки в React JS

как скрыть/отобразить кнопку отправки в React JS

#reactjs #forms #react-native #react-hooks #react-hook-form

Вопрос:

Я совершенно новичок в 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\Desktopis.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;

Комментарии:

1. Как это связано с java?

2. Вы можете использовать тернарный оператор для подобных вещей. {this.state.enddate ? (<input type='submit' value="Download" class="bi bi-cloud-arrow-down" style={{ width: '10%', height: 30}} />) : null}

3. Что означает кейин?

4. как проверить диапазон дат для определенного периода? пример: пользователь может выбрать даты в течение 3 лет на основе даты начала

Ответ №1:

Вы можете добавить проверку на основе дат начала и окончания вашего штата. Попробуйте выполнить следующий код

    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\Desktopis.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 amp;amp; this.state.enddate amp;amp; <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;
Метки: