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

	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 2

您可以使用：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 3

您需要一个空值来呈现一个空字符串，其默认值为null。这是fiddle

 <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，它必须是controlled。

Answer 4

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

是的，我们有意识地对未定义和null进行了不同处理，就像JS一样。基本上，阅读规范定义是我们的解释。如上所述，空值：表示有意缺少任何对象值的原始值

我不建议测试实际上不存在的东西。

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

这可能就是您想要的！

如何在React中使用占位符和数字输入？

4 个答案: