Question

我是React的新手，我不断尝试这个错误尝试了一些我发现的建议，但似乎没有一个对我有用。我猜这个错误与反应编译的方式有关。只是似乎没有找到我的＆＃34;符号＆＃34;在render方法中使用id 。在此先感谢您的帮助。

我的错误

App.js：101 Uncaught TypeError：无法读取属性＆＃39; value＆＃39;为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>     

      );
   }

Answer 1

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

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

Answer 2

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

  constructor(props) {
super(props)

this.state = {
      inputAmt：＆＃39;＆＃39 ;,
      inputSym：＆＃39;＆＃39;
    }

<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" />

未捕获的TypeError：无法读取属性＆＃39;值＆＃39;在React中为null

2 个答案: