更改输入标签中的默认值

Posted 2023-03-05

【中文标题】更改输入标签中的默认值

【英文标题】：change default value in input tag

【发布时间】：2018-07-26 13:16:03

【问题描述】：

我正在使用 react-form 创建一个输入表单。我正在使用标签。我想预先填充输入字段，但我希望用户仍然能够更改输入的默认值。 React 是我使用的前端语言。我尝试将输入标签内的 readOnly 字段设置为 false。它允许我单击该字段，但我仍然无法退格默认日期并将其更改为其他日期。

当我使用占位符时，根本没有输入标签，会出现重叠问题（检查附上的图片）。一旦您输入了一个值，就没有问题了，因为“到期日期”随着现有功能的上升而上升。

我需要占位符仅在我单击“截止日期”字段以输入值时显示，或者在使用输入标记时能够更改默认值。我正在使用反应版本 16.2.0enter image description here

              <Field
                name="dueDayOfFilingPeriod"
                component=TextField
                floatingLabelText="Due Date"
                floatingLabelStyle=(props.hasFilingFormName || props.hasPreference) ?  : styles.floatingLabelStyle
                floatingLabelFocusStyle=styles.floatingLabelFocusStyle
                disabled=props.hasFilingFormName
                style=styles.inline
              >
                <input value= props.filingInfo.dueDate/>
              </Field>

【参考方案1】：

您可以在<input /> 上设置defaultValue 属性而不是value 属性。这种模式通常被称为不受控制的组件，因为你只设置了起始值，你可以在这里阅读更多：https://reactjs.org/docs/uncontrolled-components.html

要使其成为一个受控组件，其中值始终相对于组件的状态进行设置，您需要将onChange 处理程序添加到<input /> 组件并使用新值更新状态。您可以在此处阅读有关受控组件的更多信息：https://reactjs.org/docs/forms.html

【讨论】：

这些解决方案都不适用于我的情况，这就是为什么我认为是这种情况。当我将默认值设置为 props.filingInfo.dueDate 时，该字段留空。我相信这是因为在创建表单时，filingInfo 对象是空的。当我在前一个输入框中输入表单名称时，会进行一个 api 调用，该调用返回 FilingInfo 对象并将其放入存储中。还有，这个组件是无状态组件，所以onChange不能使用this.setstate。

API 调用完成后，您可以通过将key 属性应用于组件来重新安装无状态组件，如下所示：<StatelessComponent key="loaded" />。重新安装后，它将在输入上正确应用defaultValue。否则，您可以在父组件中定义 onChange 处理程序并将其作为道具传递给无状态组件。所以输入看起来像<input value=this.props.value onChange=this.props.onChange /> 如果这两种解决方案都不起作用，请分享更多您的代码库

这有助于解决我的问题。我唯一不同的是添加一个条件语句。如果我将其设置为 value，我无法将 value 设置为函数组件内的 api 调用返回的到期日期（我错误地说它是一个无状态组件）。所以我的输入代码行是这样的：