用空白值初始化 React 數字輸入控件？

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

我希望我的受控輸入在框中沒有任何值的情況下進行初始化。

我的問題是我想要一個帶有空/未定義初始值的受控數字輸入。

我建議使用如下所示的空字符串默認輸入元素中的 value props：

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

這將使輸入為空並防止來自 React 的警告。 它也可以方便地與required道具配合使用，因此用戶必須輸入輸入。

在 TypeScript 3.7+ 中，可以使用空合並運算符將其縮短為以下內容：

<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>
  )
}

此外，如果需要，您仍然可以對返回值執行邏輯。 IE：

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

獲得您正在尋找的行為的最簡單方法是將此字段的 prop 類型定義為string 。 這將允許''用作默認道具。 在提交表單時，您需要確保將此字段的值解析為數字。

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

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