Gatsby 表单上的数字输入错误

Question

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

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

Gatsby 表单上的数字输入错误

Number Input Broken on Gatsby Forms

forms

reactjs

gatsby