用空白值初始化反应数字输入控件？

Question

我希望我的受控输入在框中没有值的情况下进行初始化。 输入是一个数字，所以我不会传入一个空的''。 使用 defaultProps，我将输入初始化为 null。

在输入中输入时，控制台会报告此消息：

<MyInput> 正在更改要控制的类型 number 的不受控输入。输入元素不应从不受控切换到受控（反之亦然）。

为了防止这种情况，我通常用一个空字符串进行初始化，以防止这种“切换”发生。但是有一个数字（我不想显示 0，我不想显示任何内容）我不知道该怎么做。

static defaultProps = {
    estimatedHours: null,
    estimatedMinutes: null,
  }

默认值^^

<input
   type="number"
   onChange={(e) => this.handleChange('Hours', e.target.value)}
   onKeyDown={this.handleKeyDown}
   onPaste={this.handlePaste}
   value={estimatedHours}
   placeholder={hoursText}
   className="slds-input th-trailmix-textbox th-time-component__input"
/>

Answer 1

更简单的方法是将后备值设为空字符串。 也适用于type=number。

<input type="number" value={estimatedHours || ''} />

Answer 2

你可以设置值未定义，

如果需要，还可以添加对输入类型的检查

class Input extends React.Component {

    constructor(props) {
        super(props);
        this.state = {value: undefined};

        this.handleChange = this.handleChange.bind(this);
    }

    handleChange = (event) => {
        const isnum = /^\d+$/.test(event.target.value);
        if (isnum) {
            return this.setState({
                value: Number(event.target.value),
            });
        }
    };

    render() {
        return (
            <input
                type="number"
                onChange={this.handleChange}
                value={String(this.state.value)}
                placeholder={"Please enter number"}
            />
        );
    }
}

将字符串转换为数字，反之亦然

这不会为不受控制的输入引发错误

Answer 3

我希望我的受控输入在框中没有值进行初始化。

我的问题是我想要一个带有 null / 的受控数字输入 未定义的初始值。

我建议将输入元素中的 value 属性默认为空字符串，如下所示：

<input
   type="number"
   // ...
   value={estimatedHours === undefined ? '' : estimatedHours}
/>

这将使输入为空并阻止来自 React 的警告。它还可以方便地与 required 属性配合使用，因此用户必须输入输入。

在 TypeScript 3.7+ 中，可以使用 nullish coalescing operator 将其缩短为以下内容：

<input
   type="number"
   // ...
   value={estimatedHours ?? ''}
/>

Answer 4

不受控制的输入只是您没有将value 绑定到 JavaScript 的输入。因此，如果您正在渲染：

<input value={any} />

这是一个受控输入。

如果你想用空值渲染一个不受控制的输入，你可以简单地写

<input type="number" /> or <input type="number" placeholder="" />
or <input type="number" placeholder="please enter a number..." />

接下来，如果要提取值，请使用 ref。

state = {
  query: ''
}

handleSubmit = (e) => {
  e.preventDefault()
  this.setState({ query: this.search.value })
}

render() {
  return (
    <form>
      <input 
        type="number" 
        ref={input => this.search = input} 
        placeholder="" 
      />
      <button type="submit" onClick={this.handleSubmit}>Submit</button>
    </form>
  )
}

此外，如果需要，您仍然可以对返回值执行逻辑。即：

handleSubmit = (e) => {
  e.preventDefault()
  this.setState({ query: this.search.value.toExponential(2) })
   // square whatever the user inputs and store in this.state.query
}

Answer 5

获得您正在寻找的行为的最简单方法是将此字段的道具类型定义为string。这将允许 '' 用作默认道具。在提交表单时，您需要确保该字段的值被解析为数字。

type FormProps = {
  estimatedHours: string;
  estimatedMinutes: string;
}

FormProps.defaultProps = {
  estimatedHours: '',
  estimatedMinutes: '',
}