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

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

0 голосов
/ 19 сентября 2018

У меня есть ввод числа в форме, подобной следующей: 

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

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

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

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

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

Ответы [ 4 ]

0 голосов
/ 19 сентября 2018

Вы можете использовать: 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 } )
0 голосов
/ 19 сентября 2018

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

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

React по-прежнему считает <input type="number" input, и ей необходимо контролировать .

0 голосов
/ 19 сентября 2018

http://www.ecma -international.org / ecma-262 / 5.1 / # sec-4.3.9

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

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

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

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

0 голосов
/ 19 сентября 2018 

	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
};
...