javascript - 将 React 道具传递给 DOM 元素时遇到问题
问题描述
我正在尝试将输入限制为整数。我正在尝试传递直接在 HTML 中使用时似乎可以工作的 step 属性,但是很难让它从反应中传递出去。下面是我的渲染方法,数字输入在底部。我遇到的问题是输入仍然接受十进制。
render() {
const {
currentVariableValue,
type,
currentVariable,
variablePayload,
} = this.props
const lowHi = this.getLowHi()
const lowHiDisplay = `between ${lowHi[0]} and ${lowHi[1]}`
/* eslint-disable no-nested-ternary */
return (
<ResponseContainer>
{
type === 'text' ?
<TransparentTextArea
autoFocus
type="text"
value={ currentVariableValue }
onChange={ this.handleUpdateValue }
onFocus={ this.handleFocus }
onKeyPress={ this.handleKeyPress }
key={ currentVariable }
/> :
type === 'paragraph' ?
<TransparentTextArea
autoFocus
type="text"
value={ currentVariableValue }
onChange={ this.handleUpdateValue }
onFocus={ this.handleFocus }
onKeyPress={ this.handleKeyPress }
key={ currentVariable }
style={ { height: '300px', width: '95%', fontSize: '1.4em' } }
/> :
<TransparentInput
autoFocus
type="numeric"
value={ currentVariableValue }
onChange={ this.handleUpdateValue }
onFocus={ this.handleFocus }
onKeyPress={ this.handleKeyPress }
key={ currentVariable }
invalid={ !variablePayload.isValid }
step={ 1 }
/>
}
解决方案
错误在你的type
道具中。将其更改为number
. 喜欢:
<TransparentInput
autoFocus
type="number"
推荐阅读
- unity3d - 如何使用两个音频监听器?
- ios - 如何访问 Project > Build Settings > Other Swift Flags 中定义的值?
- javascript - 如何用玩笑配置`NormalModuleReplacementPlugin`
- android - UncaughtException ExceptionInInitializerError
- c# - 在创建/完成封闭类型之前如何使用嵌套类型构建器?
- azure - 将链代码部署到 Azure 上的 Hyperledger Fabric Consortium
- rest - Yii2 rest api 基本认证
- sql - ORDER BY 可能缺少列
- python - 将函数映射到 Pandas 中的列值的问题
- android - 如何合并两个菜单并对它们进行排序?