如何在 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

\r\n

\r\n

\tclass App extends React.Component{\r\n\t  constructor(props){\r\n\t\tsuper(props);\r\n    this.state = {weight:undefined}\r\n\t  }\r\n\t  render(){\r\n\t\treturn(\r\n\t\t\t<input\r\n          type="number"\r\n          id="weight"\r\n          value={this.state.weight}\r\n          placeholder="Enter weight\xe2\x80\xa6"\r\n        />\r\n\t\t)\r\n\t  }\r\n\t}\r\n\r\n\tReactDOM.render(\r\n\t<App/>,\r\n\tdocument.getElementById("root")\r\n\t);

\r\n

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

\r\n

\r\n

\r\n

\n\n

定义weight一下undefined就可以了。

\n\n

this.state = {\n    weight:undefined\n};\n

\n

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