我redux-form按照以下示例用于我的表單：https ://redux-form.com/8.3.0/docs/api/fields.md/
所以<Fields />就像這樣：
<Fields
names={['firstName', 'lastName']}
component={input}
validate={{
firstName: (value, allValues, props, name) => 'error'
}}
warn={{
lastName: (value, allValues, props) => 'warning'
}}
/>
我渲染的欄位組件是這個
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>
)
到目前為止一切順利，表單顯示了 2 個輸入欄位，我可以向其中添加值。
但是我如何將默認值傳遞給輸入？
當我將value屬性添加到 中時input，之后我無法編輯輸入。
例如，我添加value具有如下值的道具：
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>
)
這樣，輸入總是具有相同的初始值。關于如何獲得默認值并能夠對其進行編輯的任何幫助，謝謝。
uj5u.com熱心網友回復：
當您提供value道具時，您還需要提供onChange功能并處理狀態 - https://reactjs.org/docs/forms.html#controlled-components
并來自 redux-form 檔案：https ://redux-form.com/8.3.0/docs/api/field.md/#-code-onchange-event-newvalue-previousvalue-name-gt-void-code-optional -
uj5u.com熱心網友回復：
您需要一個狀態變數來保存輸入值。
const [inputValue, setInputValue] = useState('');
在input標簽中，使用之前宣告的狀態變數作為輸入的value&in onChange，將輸入值設定為目標值。
<input type="text" value={inputValue} onChange={e => setInputValue(e.target.value)} />
uj5u.com熱心網友回復：
您可以使用 prop defaultValue，如 Redux Form 檔案中所述：https ://redux-form.com/6.0.0-alpha.4/docs/api/field.md/#props
<Field component={your custom component} defaultValue={}/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/440203.html
標籤：javascript 反应 还原 还原形式