gpt4 book ai didi

reactjs - 在 TextField 类型 ="number"上设置最小值/最大值?

转载 作者:行者123 更新时间:2023-12-03 10:39:42 24 4
gpt4 key购买 nike

我正在使用 Material-UI v1.0.0-beta23 和 redux-formredux-form-material-ui .我有一个 Field那是类型号,我想在标签上设置最小值和最大值。我都试过了 inputProps和最小/最大,似乎都没有做我想做的。我查看了源代码,并没有看到明显的方法来做到这一点。有可能吗,如果有,怎么做?
这是我的 JSX 展示了我尝试过的东西。

<Field
name="maxNodeSelectedCount"
component={TextField}
label="Max Node Selected Count"
type="number"
inputProps={{ min: 0, max: 10 }}
min={11}
max={20}
format={formatOption}
normalize={normalizeOption}
{...propertyFieldDefaults}
/>
这是 DOM 的样子:
<input type="number" class="MuiInput-input-346 MuiInput-inputSingleline-349 MuiInput-inputDense-347" value="-3" name="options.maxNodeSelectedCount">

最佳答案

redux 形式 Field将 props 传递给组件:

All other props will be passed along to the element generated by the component prop.



TextField有一个名为 InputProps 的属性可用于将 Prop 传递给 Input它呈现的组件。如果您使用 redux-form-material-ui 也是如此.它的 TextField 只是 material-ui 组件的包装器。

Material -ui Input组件有一个名为 inputProps 的属性可用于将 Prop 传递给 input它呈现的元素。

好的,那我该怎么办?

您需要一路传递 Prop ,来自 Field , 至 TextField , 至 Input , 到 input元素。

所以如果我们设置 InputProps在 Field 上,它将被传递给 TextField,后者将把它传递给 Input组件。如果我们传递的对象包含一个内部 inputProps (有意小写 'i'),输入组件会将其传递给 input元素。

hot-proptato 游戏:

基本上,定义一个 inputProps对象内 InputProps并将其应用到 Field :
<Field
name="maxNodeSelectedCount"
component={TextField}
label="Max Node Selected Count"
type="number"
InputProps={{ inputProps: { min: 0, max: 10 } }}
format={formatOption}
normalize={normalizeOption}
{...propertyFieldDefaults}
/>
  • 字段将 InputProps 传递给 TextField
  • TextField 将 InputProps 的内容传递给 Input组件
  • Input 将 inputProps 的内容传递给 input元素

  • 有一个警告:

    current implementation of TextFieldinputProps 设置自己的值使 inputClassName应用于 input元素。

    通过将你自己的 inputProps 值交给 TextField,你将覆盖 TextField 应用的版本,留下 inputClassName未设置。如果正在使用 inputClassName您需要将其包含在内部 inputProps 中对象。

    编辑:我已提交 issuepull request在 future 的版本中解决这个警告。

    关于reactjs - 在 TextField 类型 ="number"上设置最小值/最大值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47798104/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com