Question

我希望在输入日期字段为空时启用复选框。我有一个公共组件来创建表单和编辑表单。在编辑表单时，我希望复选框能够被选中，并且在创建表单时，如果日期字段具有某些值，则输入日期字段将被禁用。如果创建表单时输入了日期，则应取消选中“编辑时”复选框，并启用输入日期字段。

下面的代码段有效，但即使在编辑时输入日期字段中有日期，复选框也已启用。我要取消选中复选框。

class CreateAndEditForm extends React.Component {
   constructor(props) {
   super(props);
   this.state = {
       email: '',
       expiry:this.is_create() ? '': this.props.expires)),
       no_expiry: true,
   };

}

submit = (event) => {
   if(this.is_create()) {
       const server_data = {
           ....: ----
           ....: -----
       };
       client.create(server).catch((request);
      } else {
       const server_data = {
           ....:---
       };
       client.update().then(() => {
           this.props.on_updated();})
   }

};

on_change = (event) => {
   let value;
   if (event.target.type === 'checkbox') {
       value = event.target.checked;
       if(value && this.state.expiry!== ''){
           this.setState({expiry: ''});
       }
   } else {
       value = event.target.value;
   }
   this.setState({[event.target.name]: value});

};

is_create = () => !this.props.expires;
render = () => {

   const className = this.is_create_share() ? 'a' : 'b_class';
   const label = this.is_create()? 'CREATE' : 'CONFIRM';

   return (
       <form onSubmit={this.handle_submit}>
           <div className={className}>
               {this.is_create && <label>
                   <span>Recipient</span>
                   <input required type="email" name="email" onChange={this.on_change}/>
               </label>}
               <label>
                   <span>Date</span>
                   <input
                       type="date"
                       name="expiry"
                       value={this.state.expiry}
                       onChange={this.on_input_change}
                       disabled={(this.state.no_expiry && !this.state.expiry)}
                       required={!this.state.no_expiry}
                       pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"/>
               </label>
               <label>
                   <input
                       type="checkbox"
                       name="no_expiry"
                        onChange={this.on_change}
                    checked={this.state.no_expiry}/>
                      checkbox<br/>
               </label>
           </div>
           <div>
               <button type="button" onClick={this.props.close}>Cancel</button>
               <button type="submit">
                   {label}

               </button>
           </div>
       </form>
   );

} }

有人可以帮我解决这个问题吗？谢谢。

如何在reactjs中的空输入日期字段上启用复选框？

0 个答案: