Как я могу использовать заполнитель с вводом числа в React?

Question

У меня есть номер ввода в форме, как показано ниже:

<input
  type="number"
  id="weight"
  onChange={this.handleChange}
  value={this.state.weight}
  placeholder="Enter weight…"
/>

Как можно отобразить фразу-заполнитель?

Если я изначально установлен this.state.weight ценить, оценивать 0, то никакой заполнитель не отображается.

Если я установлю его на null заполнитель отображает, но получите это уродливое предупреждение

Предупреждение: value поддержать input не должно быть нулевым. Попробуйте использовать пустую строку для очистки компонента или undefined для неконтролируемых компонентов.

Answer 1

Ты можешь использовать: weight: ""

class App extends React.Component {
  state = {
    weight: "",
  };

  handleChange = e => this.setState( { weight: e.target.value } )

  render() {
    return (
      <div>
        <input
          type="number"
          id="weight"
          onChange={this.handleChange}
          value={this.state.weight}
          placeholder="Enter weight…"
        />
      </div>
    );
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Если вам нужен номер в конце изменения, вы можете использовать:

handleChange = e => this.setState( { weight: e.target.valueAsNumber } )

Answer 2

 class App extends React.Component{
   constructor(props){
  super(props);
    this.state = {weight:undefined}
   }
   render(){
  return(
   <input
          type="number"
          id="weight"
          value={this.state.weight}
          placeholder="Enter weight…"
        />
  )
   }
 }

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

определять weight с undefined Это будет работать.

this.state = {
    weight:undefined
};

Answer 3

Вам нужно пустое значение для рендеринга пустой строки, с null значение по умолчанию. Вот скрипка

 <input
    type="number"
    id="weight"
    onChange={(e) => this.setState({ age: e.target.value })}
    value={this.state.age || ''}
    placeholder="Enter weight…" />
  />

Реагировать все еще считает <input type="number" быть inputи это нужно контролировать.

Answer 4

http://www.ecma-international.org/ecma-262/5.1/

Да, мы намеренно относимся к неопределенным и нулевым по-разному, как и JS. По сути, чтение спецификаций является нашим объяснением. как указано, NULL VALUE: примитивное значение, которое представляет намеренное отсутствие какого-либо значения объекта

Тестирование на то, чего на самом деле нет, я бы не рекомендовал.

<input
    type="number"
    id="weight"
    onChange={(e) => this.setState({ age: e.target.value })}
    value={this.state.age || undefined}
    placeholder="Enter weight…" />
 />

это то, что вы, вероятно, ищете!