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

在React中，有一种更好的方法是使用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

我认为id不匹配。第1行，您给了“ scbytecode” 第2行，您正在尝试通过不存在的ID“ smartcontract”进行访问，因此您会看到null

在react中传递html值作为参数

2 个答案: