我在$(document).ready(function(){
var offset = $(".navbar").offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() >= offset) {
$('.navbar').addClass('navbar-fixed');
}
});
react-final-form内部使用的自定义React组件的值为<Field>。它的值可以是整数或null。但是，当我使用int?组件的null属性为此字段组件的值设置initialValues初始值时，<Form>会将react-final-form转换为空字符串null。
我知道我可以通过创建一个检查''并将其转换为''的包装器组件来解决此问题，但是还有其他更清洁的方法可以解决此问题吗？还是这是一个库错误？
https://codesandbox.io/s/yq00zxn271
null答案 0 :(得分：3)
您可以使用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"));
道具allowNull?来关闭此行为，以便将空值按原样传递给子组件。
像这样：
<Field>https://codesandbox.io/s/n4rl2j5n04
（回答我自己的问题以帮助他人，因为花了我一段时间才弄清楚发生了什么情况以及如何解决该问题）