如何在 react-final-form 中将 null 作为字段的初始值传递？答案

【问题标题】：How to pass null as a field's initial value in react-final-form?如何在 react-final-form 中将 null 作为字段的初始值传递？
【发布时间】：2018-06-22 21:55:53
【问题描述】：

我在 react-final-form <Field> 中使用的自定义 React 组件的 value 属性为 int?。它的值可以是整数或空值。但是当我使用<Form> 组件的initialValues 属性为该字段组件的值设置null 初始值时，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>&nbsp;
          <Field name="someInteger">
            {({ input, meta }) => (
              <IntField {...input} />
            )}
          </Field>
        </form>
      )}
    />
);

render(<App />, document.getElementById("root"));

【问题讨论】：

标签： javascript forms reactjs react-final-form

【解决方案1】：

您可以使用<Field> 属性allowNull? 关闭此行为，以便将空值按原样传递给子组件。

像这样：

<Field name="someInteger1" allowNull={true}>
  {({ input, meta }) => (
    <IntField {...input} />
  )}
</Field>

https://codesandbox.io/s/n4rl2j5n04

（回答我自己的问题是对其他人的帮助，因为我花了一段时间才弄清楚发生了什么以及如何解决它）

【讨论】：

是的。你说对了！ ?

【解决方案2】：

如果你和我一样，正在寻找一种方法来防止 final-form 取消定义空字符串，你可以使用 parse 和标识函数：

<Field
  name="myField"
  parse={x => x}
  component={TextField}
/>

【讨论】：