Question

我正在尝试学习ReactJ和NodeJ，这是我第一次同时使用它们。我有一个应用程序，其中使用NodeJs和Express创建后端，并在ReactJs中创建前端。

服务器正在正常运行，所有端点均已通过Postman测试。我正在尝试通过创建新项将前端与后端连接起来。

这是一个简单的CRUD应用，可以在酒店中创建，更新和删除房间。

我有一个父组件App.js和两个子组件。一个子组件是Admin.js，用户可以在其中更改房间的详细信息，另一个子组件是LandingPage.js，其中应该显示更改。

App.js

export default class App extends React.Component {

    constructor(props) {
      super(props);

      this.state = {
        initialTitle: '',
        initialDescription: '',
        initialPrice: ''
      }
    }

    onChangeTitle(newTitle) {
      this.setState({
        initialTitle: newTitle
      });
    }

    onChangeDescription(newDescription) {
      this.setState({
        initialDescription: newDescription
      });
    }

    onChangePrice(newPrice) {
      this.setState({
        initialPrice: newPrice
      });
    }

    onSubmit(e) {
      e.preventDefault();
      const obj = {
        initialTitle: this.state.initialTitle,
        initialDescription: this.state.initialDescription,
        initialPrice: this.state.initialPrice
      };
      axios.post('http://localhost:27017/admin/add', obj)
        .then(res => console.log(res.data));

      this.setState({
        initialTitle: '',
        initialDescription: '',
        initialPrice: ''
      })
    }
    render() {
        return (

            <div>
            <Route path = "/" exact component = {LandingPage}/>
            <Route path = "/admin" component = {() =>
              <Admin 
              initialTitle = {
                this.state.initialTitle
              }
              initialDescription = {
                this.state.initialDescription
              }
              initialPrice = {
                this.state.initialPrice
              }
              changeTitle = {
                this.onChangeTitle.bind(this)
              }
              changeDescription = {
                this.onChangeDescription.bind(this)
              }
              changePrice = {
                this.onChangePrice.bind(this)
              }
              onSubmit = {
                this.onSubmit
              }
              />}/ >

Admin.js

我正在使用Boostrap 4模式。当我单击按钮时，将弹出模式对话框，我应该插入房间详细信息，然后单击“保存”按钮。

class Admin extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      title: props.initialTitle,
      description: props.initialDescription,
      price: props.initialPrice

    }
  }

  onFormSubmit() {
    console.log("save");
    this.props.changeTitle(this.state.title)
    this.props.changeDescription(this.state.description)
    this.props.changePrice(this.state.price)
  }


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

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

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


  render() {
    return (
          <div>  

      <button type="button" data-toggle="modal" data-target="#createModal" class="btn btn-      primary btn-lg btn-block mb-5">Add new room</button>

          </div>
          <div className="modal-body">
            <form onSubmit={this.onFormSubmit}>
              <div className="form-group">
                <label htmlFor="title" className="col-form-label">Title:</label>
                <input 
                type="text" 
                value={this.state.title} 
                onChange{(event)=>this.onHandleTitleChange(event)} 
                />
              </div>
              <div className="form-group">
                <label htmlFor="message-text" className="col-form-label">Description:</label>
                <textarea 
                type="text" 
                value={this.state.description} 
                onChange{(event)=>this.onHandleDescriptionChange(event)}"></textarea>
              </div>
              <div className="form-group">
                <label htmlFor="title" className="col-form-label">Price:</label>
                <input 
                type="text" 
                value={this.state.price} 
                onChange={(event)=>this.onHandlePriceChange(event)} />
              </div>
            </form>
          </div>
          <div className="modal-footer">
            <button type="button" className="btn btn-secondary"
            data-dismiss="modal">Close</button>
            <button data-backdrop="false" type="button" 
            className="btn btn-primary">Save</button>
          </div>
        </div>
      </div>
    </div>
  </div>
    )
  }

}
export default requireAuth(Admin);

当我按下“保存”按钮时，什么也没发生，我没有任何错误，我的数据也没有保存在数据库中。

后端代码

room.route.js

// Defined store route
roomRoutes.route('/add').post(function (req, res) {
    let room = new Room(req.body);
    room.save()
      .then(room => {
        res.status(200).json({'room': 'room in added successfully'});
      })
      .catch(err => {
      res.status(400).send("unable to save to database");
      });
  });

index.js

//DB setup
mongoose.connect("mongodb://localhost:27017/hotel", { useNewUrlParser: true });

//App setup
app.use(morgan('combined')); //every incoming request is passed to morgan and bodyParser
app.use(cors());
app.use(bodyParser.json({type: '*/*'})); //morgan and bodyParser are like middleware in express

app.use('/admin', roomRoute);
router(app);

//Server setup
const port = process.env.PORT || 3090;
//create http server who knows how to recieve request and send to app
const server = http.createServer(app);
server.listen(port);
console.log('server listenining on ', port);

任何建议都非常感谢。

Answer 1

在功能onFormSubmit的“管理”组件中，您还需要调用onSubmit属性。

onFormSubmit() {
    console.log("save");
    this.props.changeTitle(this.state.title)
    this.props.changeDescription(this.state.description)
    this.props.changePrice(this.state.price)
    this.props.onSubmit()
  }

Answer 2

那么您需要调用App组件的onSubmit方法来使其工作。您将其作为道具传递给Admin组件，但根本没有在Admin组件中使用。在您的Admin组件的onFormSubmit方法中，调用this.props.onSubmit将调用发送到App组件的onSubmit方法，然后只有它会调用ur后端。 / p>

将onFormSubmit方法更改为此：

onFormSubmit() {
    console.log("save");
    this.props.changeTitle(this.state.title)
    this.props.changeDescription(this.state.description)
    this.props.changePrice(this.state.price)
    this.props.onSubmit();
}

是的，在submit组件中将按钮类型更改为Admin 试试看，让我知道。希望能帮助到你！！

无法提交表单-ReactJs，Node.js

2 个答案: