Question

伙计，我想我是在这里丢失了一些东西，或者是我不知道我不知道的东西。

我拥有的是：

<form action="/orders/populate" method="post">
  <input type="hidden" name="name" id="name"/>
  <input type="hidden" name="rating" id="rating"/>
  <input type="submit" name="commit" value="Rate Now" />
</form>

我想做的是：

Class myComponent extends React.PureComponent {
    handleSubmit(e) {
      e.preventDefault(); // don't know if this is necessary
      sendAnalytics();
      // then form submit
    }

    render () {
        return (
            <form action="/orders/populate" method="post" onSubmit={this.handleSubmit.bind(this)}>
              <input type="hidden" name="name" id="name"/>
              <input type="hidden" name="rating" id="rating"/>
              <input type="submit" name="commit" value="Rate Now" />
            </form>
        );
    }
}

不知道该怎么做。有人可以指出类似的例子吗？或者也许在下面给我一个示例代码？

感谢所有帮助。

Answer 1

Class myComponent extends React.PureComponent {

this.state = {
 name: ''  // initial value for name 
 rating: '' // initial value for rating
}

handleInput = e => {
 this.setState({[e.target.name]: e.target.value})
}
handleSubmit = e => {
  const { name, rating } = this.state;
  e.preventDefault(); // yes, this is necessary otherwise it's refresh your page.
  sendAnalytics(name, rating); // api call to store in DB. to call API use axios npm package

}

render () {
    const { name, rating } = this.state;

    return (
        <form onSubmit={this.handleSubmit}>
          <input type="text" name="name" value={name} id="name" onChange={(e) => this.handleSubmit(e)}/>
          <input type="text" name="rating" value={rating} id="rating" onChange={(e) => this.handleSubmit(e)}/>
          <input type="submit" name="commit" value="Rate Now" />
        </form>
    );
}
}

Answer 2

这是我在React中遇到的常见问题。您可以使用以下三种方式之一：

1）使用第三方React-Form库完成这项工作。有几个。

2）使用React-hooks（React的最新添加）。

3）创建一个通用的Form类来为您处理这种状态管理……就像这样：

export default class Form extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      values: {}
    };
  }

  @boundMethod
  handleSubmit(event) {
    event.preventDefault();

    this.props.submit(this.state.values);
  }

  @boundMethod
  handleChange(event) {
    const { name, value } = event.target;
    const newValues = Object.assign(
      { ...this.state.values },
      { [name]: value }
    );
    this.setState({
      values: newValues
    });
  }

  public render() {
    const { values } = this.state;
    return (
      <form onSubmit={this.handleSubmit} noValidate={true}>
        <div>
          {React.Children.map(
            this.props.children,
            child => (
                {React.cloneElement(child, {
                  value: values[child.props.name],
                  onChange: this.handleChange
                })}
            )
          )}
          <div>
            <button type="submit">
              Submit
            </button>
          </div>
        </div>
      </form>
    );
  }
}

然后您将可以像下面这样使用Form类：

<Form
  submit={values => {
    /* work with values */
  }}
>
  <input type="hidden" name="name" />
  <input type="hidden" name="rating" />
</Form>;

PS ：请记住，boundMethod装饰器不是本机可用的东西，而是一个名为“ autobind-decorator”的模块，我倾向于大量使用来处理this不受约束的情况。

Answer 3

您是否看过docs在React中处理表单？这将为您提供有关如何在React中使用表单的见解，因为它的处理方式与常规html表单有所不同

将带动作的HTML表单转换为带逻辑的React表单提交

3 个答案: