未捕获的类型错误：无法在 React 中读取 null 的属性“值”答案

【问题标题】：Uncaught TypeError: Cannot read property 'value' of null in React未捕获的类型错误：无法在 React 中读取 null 的属性“值”
【发布时间】：2018-03-29 20:56:22
【问题描述】：

我是 React 新手，我不断收到此错误，尝试了一些我发现的建议，但似乎没有一个对我有用。我猜这个错误与 react 编译的方式有关。它只是 在渲染方法中似乎没有找到我的“符号”id。提前感谢您的帮助。

我的错误

App.js:101 Uncaught TypeError: Cannot read property 'value' of null

at App.registerTrade (App.js:101)
at App.render (App.js:137)
at ReactCompositeComponent.js:793
at measureLifeCyclePerf (ReactCompositeComponent.js:73)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:792)
at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:819)
at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:359)
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:255)
at Object.mountComponent (ReactReconciler.js:43)
at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:368)

这是我的功能

registerTrade() {

      var contract = require('truffle-contract')
      var tradeRegistry = contract(tradeRegistryContract);
      var self = this;

      var amount = parseInt(document.getElementById("amount")).value;
      var symbol = document.getElementById("symbol").value;

      this.setStatus("Registering trade... (please wait)");

      var meta; 

      tradeRegistry.deployed().then(function(instance) {
        meta = instance;
        return meta.registerSale(amount, symbol);
      }).then(function() {
        self.setStatus("Trade registered!");
      }).catch(function(e) {
        console.log(e);
        self.setStatus("Error registering trade; see log.");
      });
    }

React 渲染方法

render() {

      return (
        <div className="App">
          <nav className="navbar pure-menu pure-menu-horizontal">
              <a href="#" className="pure-menu-heading pure-menu-link">Trade Registry</a>
          </nav>



         <main className="container">
          <div className="pure-g">
            <div className="pure-u-1-1">
             <h1>Welcome</h1> 
             <br></br>
             <h3>Register your trade</h3>
             <br></br><label for="amount">Amount:</label><input type="text" id="amount" placeholder="e.g., $420"></input>
             <br></br><label for="symbol">Symbol:</label><input type="text" id="symbol" placeholder="e.g., TSLA"></input>
             <br></br><button id="send" onClick={this.registerTrade()}>Register Trade</button>
             <br></br>
             <span id="status"></span>
             <br></br>
             <br></br>
             <span id="block"></span>
             <br></br>
             <span id="evntAddress"></span>
             <span id="evntAmt"></span>
             <span id="evntSymbol"></span>
            </div>
          </div>
        </main>
      </div>     

      );
   }

【问题讨论】：

标签： javascript reactjs react-dom web3

【解决方案1】：

我认为您正在解析 dom 元素而不是值。试试：

var amount = parseInt(document.getElementById("amount").value, 10);

【讨论】：

非常感谢您的快速回答，但目前我的错误在于这一行：
Symbol: 抱歉，如果我的问题没有足够具体的编辑。

【解决方案2】：

所以我找到了答案，我必须声明状态变量，然后从我的 html 元素中调用它们，就像这样。

  constructor(props) {
super(props)

this.state = {
inputAmt:'',
输入符号：''
}

<br></br><label htmlFor="amount">Amount:</label><input value={this.state.inputAmt} onChange={amt => this.updateInputAmt(amt)} type="text" id='amount' placeholder="e.g., $420" />
<br></br><label htmlFor="symbol">Symbol:</label><input value={this.state.inputSym} onChange={sym => this.updateInputSym(sym)} type="text" id='symbol' placeholder="e.g., TSLA" />

【讨论】：