[英]redux-form How to have initial value in the input field
I use redux-form
for my form, following the example: https://redux-form.com/8.3.0/docs/api/fields.md/我使用
redux-form
作为我的表单,示例如下: https://redux-form.com/8.3.0/docs/api/fields.md/
So the <Fields />
is like so:所以
<Fields />
是这样的:
<Fields
names={['firstName', 'lastName']}
component={input}
validate={{
firstName: (value, allValues, props, name) => 'error'
}}
warn={{
lastName: (value, allValues, props) => 'warning'
}}
/>
the fields component that i render is this我呈现的字段组件是这个
const renderFields = (fields) => (
<div>
<div className="input-row">
<input {...fields.firstName.input} type="text"/>
{fields.firstName.meta.touched && fields.firstName.meta.error &&
<span className="error">{fields.firstName.meta.error}</span>}
</div>
<div className="input-row">
<input {...fields.lastName.input} type="text"/>
{fields.lastName.meta.touched && fields.lastName.meta.error &&
<span className="error">{fields.lastName.meta.error}</span>}
</div>
</div>
)
So far so good, the form displays the 2 input fields and i can add values into them.到目前为止一切顺利,表单显示了 2 个输入字段,我可以向其中添加值。
But how do i pass default values into the input's?但是我如何将默认值传递到输入中呢?
When i add the value
property into the input
, i cant edit the input afterwards.当我将
value
属性添加到input
中时,之后我无法编辑输入。
For example, i add the value
prop with a value like so:例如,我添加
value
prop 的值如下:
const renderFields = (fields) => (
<div>
<div className="input-row">
// add value="my name"
<input {...fields.firstName.input} type="text" value="my name" />
{fields.firstName.meta.touched && fields.firstName.meta.error &&
<span className="error">{fields.firstName.meta.error}</span>}
</div>
<div className="input-row">
// add value="my last name"
<input {...fields.lastName.input} type="text" value="my last name" />
{fields.lastName.meta.touched && fields.lastName.meta.error &&
<span className="error">{fields.lastName.meta.error}</span>}
</div>
</div>
)
In that way, the inputs have always the same init value.这样,输入始终具有相同的初始值。 Any help on how to have default value and also be able to edit it, thank you.
关于如何拥有默认值并能够对其进行编辑的任何帮助,谢谢。
When you provide the value
prop you will need to provide onChange
function as well and handle the state - https://reactjs.org/docs/forms.html#controlled-components当您提供
value
道具时,您还需要提供onChange
function 并处理 state - https://reactjs.org/docs/forms.html#controlled-components
and from redux-form docs: https://redux-form.com/8.3.0/docs/api/field.md/#-code-onchange-event-newvalue-previousvalue-name-gt-void-code-optional-来自 redux-form 文档: https://redux-form.com/8.3.0/docs/api/field.md/#-code-onchange-event-newvalue-previousvalue-name-gt-void-code-optional -
You need a state variable to hold the input value.您需要一个 state 变量来保存输入值。
const [inputValue, setInputValue] = useState('');
In the input
tag, use the previously declared state variable as value
& in onChange
of input, set the input value to the target value.在
input
标签中,使用之前声明的state变量作为value
&在input的onChange
中,将input值设置为目标值。
<input type="text" value={inputValue} onChange={e => setInputValue(e.target.value)} />
You can use prop defaultValue, as mentioned in Redux Form documentation: https://redux-form.com/6.0.0-alpha.4/docs/api/field.md/#props您可以使用 prop defaultValue,如 Redux 表单文档中所述: https://redux-form.com/6.0.0-alpha.4/docs/api/field.md/#props
<Field component={your custom component} defaultValue={}/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.