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

Question

我输入了一个数字，格式如下:

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

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

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

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

Warning: value prop on input should not be null. Consider using an empty string to clear the component or undefined for uncontrolled components.

Answer 1

您可以使用:权重:“”

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