[英]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.