简体   繁体   English

如何有条件地添加 Javascript 组件当前日期?

[英]How can I conditionally add Javascript component current date?

TextInput is a component. TextInput 是一个组件。 I want to set a current Date for the part with formKey = {'signDate'} using the TextInput component.我想使用 TextInput 组件为带有formKey = {'signDate'}的部件设置当前日期。 I have shared the use of component below.我在下面分享了组件的使用。 If conditionally formKey = {'signDate'} , I want to send a current Date to the changeSelected method.如果有条件formKey = {'signDate'} ,我想将当前日期发送到 changeSelected 方法。 If the key is not 'signDate', it should set the input value.如果键不是'signDate',它应该设置输入值。 How can I do that?我怎样才能做到这一点?

TextInput usage文本输入用法

<TextInput
  fieldName={'Date'}
  addClassName={'orange-text'}
  formKey={'signDate'}
  disabled={true}
/>

TextInput.js文本输入.js

<Form.Group controlId={formKey}>
  {fieldName && (<Form.Label>{fieldName}</Form.Label>)}
    <Form.Control type={type}
          placeholder={placeholder}
          required={required}
          name={formKey}

          onBlur={e => {
             let val = e.target.value
                 if (changeSelected) {
                     changeSelected(val)
                       }
                   }}

             onChange={evt => updateValue(evt)}
             value={input.value}
             disabled={disabled}
             maxLength={maxLength}
             className={(addClassName ? ' ' + addClassName : '')}
       />

 <Form.Control.Feedback type="invalid" style={{
      width: '8rem',
      color : 'red'
  }}>
       {validationError}
  </Form.Control.Feedback>
</Form.Group>
if (this.props.formKey === 'signDate') {
   const date = new Date()
   changeSelected(date)
} else {
   changeSelected(e.target.value)
}

you need to look for a prop called formKey and ensure it has the value signDate then call the function with a new Date() passed in. else call it with the input val您需要寻找一个名为formKey的道具并确保它具有值signDate然后使用传入的new Date()调用 function。 else使用输入 val 调用它

CodeSandbox Demo: https://codesandbox.io/s/nice-water-3oj8i?file=/src/TextInput.js CodeSandbox 演示: https://codesandbox.io/s/nice-water-3oj8i?file=/src/TextInput.js

formKey is already available and used in the scope available to your call to changeSelected . formKey已经可用并在 scope 中使用,您可以调用changeSelected You should be able to use it directly:您应该可以直接使用它:

changeSelected(formKey === 'signDate'? new Date().toLocaleDateString(): e.target.value)

Note: You didn't specify what kind of Date string you want to be there (which by the way is locale dependent and should be parsed before being sent back to server).注意:您没有指定您想要在那里的日期字符串类型(顺便说一下,这取决于语言环境,应该在发送回服务器之前进行解析)。 Your input is just a normal input with no schema applied it, so I just guessed that you want a bare date string.您的输入只是一个没有应用架构的普通输入,所以我只是猜想您想要一个裸日期字符串。 Is there a reason you aren't using a Date control (available to react-bootstrap which you are using)?您是否有理由不使用 Date 控件(可用于您正在使用的 react-bootstrap)?

Are you perhaps actually just having trouble with formatting a Date string?您是否真的只是在格式化日期字符串时遇到了麻烦?
toLocaleDateString toLocaleDateString
toLocaleString toLocaleString
Intl.DateTimeFormat 国际日期时间格式

I believe you are using ReactJS, there are multiple ways to add /include elements conditionally, good post on the same https://scotch.io/tutorials/7-ways-to-implement-conditional-rendering-in-react-applications我相信您使用的是 ReactJS,有多种方法可以有条件地添加/包含元素,在同一个https 上发布好帖子://scotch.io/tutorials/7-ways-to-implement-conditional-rendering-in-react-applications

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM