我在 react-final-form
中使用的自定义 React 组件<Field>
具有值 prop 为 int?
。它的值可以是整数或空。但是当我设置 null
使用 initialValues
来设置此字段组件值的初始值<Form>
的支柱组件,react-final-form
转换null
为空字符串 ''
.
我知道我可以通过创建一个检查 ''
的包装器组件来轻松解决这个问题。并将其转换为null
,但是还有其他更干净的方法来解决这个问题吗?或者这是一个库错误?
https://codesandbox.io/s/yq00zxn271
import React from "react";
import { render } from "react-dom";
import { Form, Field } from "react-final-form";
const IntField = (props) => (
<span>
<input type="text" value={props.value === null ? 0 : props.value} />
<pre>
<b>props.{props.name} === null</b> : {(initialValues[props.name] === null).toString()}
<br />
<b>props.value === null</b> : {((isNull) => (<span style={{ color: isNull ? 'green' : 'red' }}>{isNull.toString()}</span>))(props.value === null)}
<br />
<b>props: </b>{JSON.stringify(props)}
<br />
<b>initialValues: </b>{JSON.stringify(initialValues)}
</pre>
</span>
)
const onSubmit = values => {
console.log('submitted')
}
const initialValues = { someInteger: null };
const App = () => (
<Form
initialValues={initialValues}
onSubmit={onSubmit}
render={() => (
<form>
<label>Some Integer:</label>
<Field name="someInteger">
{({ input, meta }) => (
<IntField {...input} />
)}
</Field>
</form>
)}
/>
);
render(<App />, document.getElementById("root"));
最佳答案
您可以使用<Field>
支柱allowNull?关闭此行为,以便将空值按原样传递给子组件。
像这样:
<Field name="someInteger1" allowNull={true}>
{({ input, meta }) => (
<IntField {...input} />
)}
</Field>
https://codesandbox.io/s/n4rl2j5n04
(回答我自己的问题是为了帮助其他人,因为我花了一段时间才弄清楚发生了什么以及如何解决它)
关于javascript - 如何在react-final-form中传递null作为字段的初始值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50996047/