Question

我正在尝试使用Gatsby构建用户表单，并且在字段中键入时，“数字”输入类型不会更新其值。

export default class FormPage extends React.Component {
    state = {
        width: 1920,
        height: 1080,
    }

    handleInputChange = event => {
        const target = event.target;
        const name = target.name;
        const value = target.type == 'number' ? parseInt(target.value) : target.value;
        this.setState({
            [name]: value,
        });
    }

    render() {
        return <input type="number" value={this.state.width} onChange={this.handleInputChange}/>
    }
}

在这种情况下，将显示期望的默认值1920，但是在输入字段上单击并尝试键入时，没有任何更改；我无法删除任何数字，并且我也无法更改输入字段中显示的1920。

Answer 1

您忘了在输入元素中添加名称，这就是为什么尝试访问event.target.name时会变得空白的原因

尝试一下：

  render() {
      return <input type="number"  name="width" value={this.state.width} onChange={(e)=>this.handleInputChange(e)}/>
  }

这是工作示例：https://codesandbox.io/s/vibrant-roentgen-zoifg

盖茨比表单上的数字输入错误

1 个答案: