将html值作为react中的参数传递

Question

我需要为我的函数传递一个html值作为参数，如下所示：

<input type ="text" placeholder="Smart Contract Bytecode" name="name" id ="scbytecode"className="nice-textbox"/>

<button id="button" onClick={parseAddress("document.getElementById('smartcontract').value)"}>Submit!</button>

但是我得到了一个错误: TypeError:无法读取属性值为null

这是完整的代码。添加这是为了给出一个更好的印象发生了什么，因为下面的修复似乎没有解决所有的问题。欢迎任何帮助。

class App extends Component {
  parseAddress(_smartcontract){

    var contractObj = new ethweb3.eth.Contract(ERC20ABI, document.getElementById('smartcontract').value);
      contractObj.getPastEvents(
          'Transfer' || 'allEvents',
          {
              fromBlock: 0,
              toBlock: 'latest'
          },
          function(err,res){
              console.log(err,res);
              //examples to access the data returned
              console.log(res.length);
              document.getElementById("totalAddresses").innerHTML = res.length;
              document.getElementById("sampleAddress").innerHTML = res[0].returnValues.from;
              document.getElementById("sampleAmount").innerHTML = res[0].returnValues.value;
          }
      );
  }
deploSC = async () => {
  const accounts = await goweb3.eth.getAccounts();

//const code = ethweb3.eth.getCode(document.getElementById('smartcontract').value); Not working 
console.log(code);
  goweb3.eth.sendTransaction({
      from: accounts[0],
      data: document.getElementById('scbytecode').value
  }, function(error, hash){
      console.log(error,hash);
  });
}

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <p>
            Enter the smart contract address:
            <input type="text" name="name" id="smartcontract" className="nice-textbox"/>
            <input type ="text" placeholder="Sc bytecode" name="name" id ="scbytecode"className="nice-textbox"/>
            <button id="button" onClick={this.parseAddress}>Submit!</button>
            <button onClick={this.deploSC}> Deploy Sc</button>
          </p>
          <p id="totalAddresses">0</p>
          <p id="sampleAddress">0</p>
          <p id="sampleAmount">0</p>


        </header>
      </div>
    );
  }
}

export default App;

Answer 1

在使用state而不是直接访问DOM时，有一种更好的方法可以做到这一点，这是应该避免的。

将input的值存储在组件的状态中，然后通过this.state.inputVal将其交给按钮的onClick事件处理程序。

​

class App extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
          inputVal: ''
      };
  }

  inputChanged = (e) => {
      this.setState({ inputVal: e.target.value });
  }

  render() {
    return (
      <div>
        <input type ="text" placeholder="Smart Contract Bytecode" name="name" id ="scbytecode" className="nice-textbox" onChange={this.inputChanged}/>

        <button id="button" onClick={() => { console.log(this.state.inputVal); }}>Submit!</button>
      </div>
    );
  }
}

// Render it
ReactDOM.render(
  <App/>,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

​

Answer 2

我认为身份证有错配。第1行给出了"scbytecode“第2行，您正在尝试通过不存在的id”智能契约“进行访问，因此您将看到null。