Question

我正在尝试使用 express-react-views 和 react-bootstrap 编写Express应用。

我没有使用创建React应用（运行npx create-react-app my-app）的常规方法，而是设置了Express应用并通过它运行路由。这一切似乎都可行，但是现在我正在尝试使用onSubmit处理程序创建一个引导表单。

我在React网站上查看了以下表单的代码示例：https://reactjs.org/docs/forms.html，但是使用下面的代码，我的handleSubmit从未被调用。如果我将onSubmit中的代码替换为console.log(‘hello’)，那么在加载页面时，我会在控制台中看到'hello'。

const React = require('react');
const Jumbotron = require('react-bootstrap').Jumbotron;
const Container = require('react-bootstrap').Container;
const Form = require('react-bootstrap').Form;
const FormGroup = require('react-bootstrap').FormGroup;
const Button = require('react-bootstrap').Button;
const AuthorisedLayout = require('./Layouts/loggedin');

class Generate extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    console.log('handleSubmit() clicked’);
    console.log(event);
    event.preventDefault();
  }

  render() {
    return (
      <AuthorisedLayout title={this.props.title}>
        <Jumbotron>
          <Container>
            <h1 className="display-3">{this.props.title}</h1>
            <p>{this.props.username}, this will generate a new key pair to be stored on the server.</p>
            <p>When the generation is complete, a zip file containing the key pair will download to your machine.</p>
          </Container>
        </Jumbotron>
        <Container>
          <Form onSubmit={this.handleSubmit}>
            <FormGroup controlId="service">
              <Form.Label>Service Name</Form.Label>
              <Form.Control type="text" placeholder="Service name" value={this.state.value} onChange={this.handleChange}></Form.Control>
            </FormGroup>
            <Button variant="primary" type="submit">
              Generate key pair
            </Button>
          </Form>
        </Container>
      </AuthorisedLayout>
    );
  }
}

module.exports = Generate;

我相信我的express应用已正确设置为使用jsx视图：

const app = express();
app.set('Views', __dirname + '/Views');
app.set('view engine', 'jsx');
app.engine('jsx', require('express-react-views').createEngine());

那么我如何使我的onSubmit正常工作，它应该在哪里输出我拥有的各种console.log，并防止事件链发生？

修改

我在这里创建了一种Codepen之类的东西：codepen

Answer 1

也许您需要在触发event.persist()函数之前添加handleSubmit。例如：

onSubmit={(event) => {event.persist();this.handleSubmit(event)}}>

和handleSubmit(event)

中

handleSubmit(event){
    // use event.currentTarget - It will be visible here
}

Answer 2

关于 express-react-views 作用和不作用的根本误解。

express-react-views 充当基于JSX的服务器端模板程序，这意味着它不提供诸如onSubmit或onChange之类的事件处理程序：

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    console.log('handleSubmit() clicked’);
    console.log(event);
    event.preventDefault();
  }

多余。

据说可以添加此功能，但是 express-react-views 的创建者并未对此加以说明或鼓励，因为这不是添加事件处理程序的保证方法。

react-bootstrap onSubmit无法正确绑定

2 个答案: