Javascript 如何在React JS中获取输入值并在按钮上显示

我不熟悉

react js

，我正在尝试获取输入值并将其设置为另一个

html

元素（p）

另一件事是，我发现leran

react js

有这么多复杂的语法和与

react js

相关的东西，真的很难理解，有什么好的教程我能理解吗

这就是我一直在互联网上研究的东西，我无法超越这个简单的东西。。。使用

jquery

我本可以很容易地完成这项工作，而

react js

出于某种原因完成这项工作似乎非常复杂（也许我错了）。反正

这是我的

selecttrains和tickets.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;

“严格使用”；
从“React”导入React，{Component}；
从“react dom”导入{render}；
导入“bootstrap/dist/css/bootstrap.css”；
类SelectTrain和Tickets扩展组件{
建造师（道具）{
超级（道具）；
这个州={
noOfTickets:{document.getElementById（'tickets'）}//获取用户输入值
};
}
showDetails（）{
这是我的国家({
午餐：
});
console.log（this.state.noOfTickets）；
}
render（）{
返回(
-选择列车-
列车A
B列
C列
D列


买票
{this.state.noOfTickets}
//显示用户输入值
);
}
}
导出默认的SelectTrain和Tickets；

---

有人能告诉我怎么做吗？

你想读的是受控输入。 只有少数情况下，您希望直接访问DOM，并且几乎不希望像示例中那样在构造函数中访问DOM

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

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

由于这是一个受控输入，您需要处理该输入的任何更改。通过事件，您将获得一个事件对象，您可以在其中检索用户在输入中输入的任何内容。您希望将该更改存储在已设置的状态变量中

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

现在，您需要将这一切连接到render（）方法中的实际输入元素

render（）{
返回(
)
}

要显示当前计数，您已经正确显示了数据，但您希望在用户单击按钮之前隐藏p元素。不要复制状态，尤其是像这样的东西。只需隐藏元素，直到用户单击按钮

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

{this.state.ticketCount}

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

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

this.setState（{showTicketCount:true}）>单击我

这是我在这里提供的答案的帮助下尝试的。我得到了这个想法，并按照我想要的方式进行了更改。这是我的最终答案：

"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”导入React，{Component}；
从“react dom”导入{render}；
导入“bootstrap/dist/css/bootstrap.css”；
类SelectTrain和Tickets扩展组件{
建造师（道具）{
超级（道具）；
此.state={
noOfTickets:0，
票数：0
};
this.haChange=this.haChange.bind（this）；
this.getCount=this.getCount.bind（this）；
}
haChange（活动）{
this.setState（{noOfTickets:event.target.value}）；
}
getCount（）{
this.setState（{ticketCount:this.state.noOfTickets}）；
}
render（）{
返回(
-选择列车-
列车A
B列
C列
D列


买票
{this.state.ticketCount==0？''：this.state.ticketCount}

);
}
}
导出默认的SelectTrain和Tickets；

您没有在showDetails方法中正确设置状态我也是新手。但我看到了这一点，当用户在您的输入框中输入某些内容时，您应该像onChange事件一样获取这些数据，并使用setState进行设置。然后单击按钮，使用this.state.noOftickets来显示它。我发现了这个惊人的react教程scrimba.com/playlist/p7P5Hd它甚至有一个编辑器来练习。这不是我想要的。我需要单击

按钮来显示用户输入值…是的，我解释了如何做。你仍然需要一个受控输入，这就是你遇到的问题。在按钮单击时显示或隐藏元素很容易搜索。谢谢，我找到了它out:）这是错误的，将不起作用。您没有在输入上设置值。您也不应该重复这样的状态。仅存储票证计数一次，并在用户单击按钮之前隐藏p元素。我已使用正确的代码更新了我的答案。如果这解决了您的问题，请标记为“正确”。
"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;