更改输入标签中的默认值

Question

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

当我使用占位符时，根本没有输入标签，而是出现了重叠问题（检查所附图像）。一旦您输入一个值，就没有问题，因为 "Due Date" 会随着现有功能向上移动。

我需要占位符仅在我单击 "Due Date" 字段输入值时显示，或者在使用输入标签时能够更改默认值。我正在使用反应版本 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>

Answer 1

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

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

更改输入标签中的默认值

change default value in input tag

forms

placeholder

default-value

textfield

reactjs