Question

我有一个要绑定到状态的数字输入：

    constructor(props) {
        super(props);
        this.state = {
            num: 100,
        };
    }
    handleChange(event) {
        this.setState({ num: event.target.value });
    }
    render() {
        return (
            <div className="App">
                <input
                        autofocus="true"
                        type="number"
                        value={this.state.num}
                        onChange={this.handleChange}
                />
            </div>
        );
    }

因此，如果我编辑输入，则状态应更改。但是我什至不能编辑输入。为什么？

Answer 1

您当前看到输入中显示的数字100，与组件的初始状态相对应。

您现在需要做的是在输入中键入内容时更改状态，以便组件可以重新渲染。

示例：

handleChange = (e) => {
    this.setState({
      num: e.target.value
    })
  }

然后将其像<input>一样传递给您的<input onChange={this.handleChange} ..... />

请参见以下工作沙箱：https://codesandbox.io/s/zn0j79l8kx?fontsize=14

无法编辑数字输入react.js

1 个答案: