Question

我是react js的新手，我正在尝试获取输入值并将其设置为另一个html元素（p）

另一件事是，我发现很难使用所有这些复杂的语法和与react js相关的东西来react js，我能理解任何好的教程吗？

这是我一直在尝试通过互联网进行的研究，我无法超越这个简单的东西...使用jquery可以很容易地做到这一点，而react js似乎很复杂出于某种原因完成工作（也许我错了）。反正

这是我的SelectTrainsAndTickets.jsx

"use strict";
import React, { Component } from "react";
import { render } from "react-dom";
import "bootstrap/dist/css/bootstrap.css";

class SelectTrainsAndTickets extends Component {
  constructor(props) {
    super(props);
    this.state={
        noOfTickets: {document.getElementById('tickets')} //getting user input value
    };
  }

  showDetails() {
    this.setState({
        noOfTickets: 
    });
    console.log(this.state.noOfTickets);
  }

  render() {
    return (
      <React.Fragment>
        <div className="container">
          <div className="row">
            <div className="col-md-2" />
            <div className="col-md-4">
              <select id="train" name="train" className="form-control">
                <option value="select" disabled="disabled">
                  - Select Train -
                </option>
                <option value="1">Train A</option>
                <option value="2">Train B</option>
                <option value="3">Train C</option>
                <option value="4">Train D</option>
              </select>
            </div>
            <div className="col-md-4">
              <input id="tickets"
                className="form-control"
                type="number"
                placeholder="Number of tickets"
              />
            </div>

            <div className="col-md-2" />
          </div>
          <br />
          <div className="row">
            <div className="col-md-2" />
            <div className="col-md-4" />
            <div className="col-md-4 text-right">
              <button
                onClick={this.showDetails.bind(this)}
                type="button"
                className="btn btn-primary"
              >
                Buy Tickets
              </button>
            </div>
            <div className="col-md-2">
                <p>{this.state.noOfTickets}</p> //showing user input value
          </div>
          </div>
        </div>
      </React.Fragment>
    );
  }
}

export default SelectTrainsAndTickets;

有人可以告诉我该怎么做吗？

Answer 1

您要阅读的是受控输入。 https://shripadk.github.io/react/docs/forms.html 在少数情况下，您想直接访问DOM，并且几乎从不希望像在示例中那样在构造函数中进行操作。

首先初始化您的状态，在这种情况下，您甚至不需要构造函数。

class SelectTrainsandTIckets extends Component {
    state = { ticketCount : 0, showTicketCount: false }
}

由于这是受控输入，因此您需要处理该输入上的所有更改。通过事件，您可以传递一个事件对象，您可以在其中检索用户在输入中输入的内容。您想要将该更改存储在已设置的状态变量中。

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

现在，您需要将所有这些都挂接到render（）方法中的实际输入元素上。

render() {
    return(
        <input name="myInput" onChange={handleChange.bind(this)} value={this.state.ticketCount} />
    )
}

要显示当前计数，您已经正确显示了数据，但是要隐藏p元素，直到用户单击按钮。不要重复状态，尤其是对于这样的事情。只需隐藏元素，直到用户单击按钮即可。

<p style={this.state.showTicketCount ? {display: 'block'} : {display: 'none'}>{this.state.ticketCount}</p>

最后是显示输入的票数的按钮：

<button onClick={() => this.setState({showTicketCount: true})>Click me</button>

Answer 2

这是我借助此处提供的答案尝试过的方法。我有了主意，然后将其更改为希望它起作用的方式。这是我的最终答案：

"use strict";
import React, { Component } from "react";
import { render } from "react-dom";
import "bootstrap/dist/css/bootstrap.css";

class SelectTrainsAndTickets extends Component {
  constructor(props) {
    super(props);
    this.state = {
      noOfTickets: 0,
      ticketCount: 0
    };
    this.haChange = this.haChange.bind(this);
    this.getCount = this.getCount.bind(this);
  }

  haChange(event) {
    this.setState({ noOfTickets: event.target.value });
  }
  getCount(){
      this.setState({ticketCount: this.state.noOfTickets});
  }


  render() {
    return (
      <React.Fragment>
        <div className="container">
          <div className="row">
            <div className="col-md-2" />
            <div className="col-md-4">
              <select id="train" name="train" className="form-control">
                <option value="select" disabled="disabled">
                  - Select Train -
                </option>
                <option value="1">Train A</option>
                <option value="2">Train B</option>
                <option value="3">Train C</option>
                <option value="4">Train D</option>
              </select>
            </div>
            <div className="col-md-4">
              <input onChange={this.haChange} className="form-control" type="number" placeholder="Number of tickets" />
            </div>

            <div className="col-md-2" />
          </div>
          <br />
          <div className="row">
            <div className="col-md-2" />
            <div className="col-md-4" />
            <div className="col-md-4 text-right">

              <button onClick={this.getCount}  type="button" value={this.state.ticketCount} className="btn btn-primary">
                Buy Tickets
              </button>
              <p>{this.state.ticketCount === 0 ? '' : this.state.ticketCount}</p>
            </div>
            <div className="col-md-2" />
          </div>
        </div>
      </React.Fragment>
    );
  }
}

export default SelectTrainsAndTickets;

如何获取输入值并将其显示在按钮上单击React JS

2 个答案: