Question

我希望我的受控输入初始化时没有框中的值。输入是一个数字，所以我不会传入空''。使用defaultProps，我用null初始化输入。

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

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

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

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

defalut值^^

<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

您可以设置值Undefined，

如果需要，还要添加输入类型检查

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"}
            />
        );
    }
}

并将String转换为Number，反之亦然

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

Answer 2

不受控制的输入只是您没有将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 3

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

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

Answer 4

<块引用>

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

<块引用>

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

我建议使用如下所示的空字符串默认输入元素中的 value props：

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

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

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

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

Answer 5

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

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

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

使用空白值初始化React数字输入控件？

5 个答案: