reactjs - 如何在 React 中使用带有数字输入的占位符？

Question

我有一个如下形式的数字输入：

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

如何在其上显示占位符短语？

如果我最初设置this.state.weight为 value 0，则不会显示占位符。

如果我将它设置null为占位符显示但收到这个丑陋的警告

警告：valueprop oninput不应为空。考虑使用空字符串来清除组件或 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…" />
  />

React 仍然认为 an<input type="number"是 an input，并且需要对其进行控制。

Answer 4

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

是的，我们有意区别对待 undefined 和 null ，就像 JS 一样。基本上，阅读规范定义是我们的解释。 如前所述，NULL VALUE：表示有意不存在任何对象值的原始值

我不建议对实际不存在的东西进行测试。

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

这就是您可能正在寻找的东西！