Передача значения html в качестве параметра в реакции - PullRequest
0 голосов
/ 28 ноября 2018

Мне нужно передать значение 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: Невозможно прочитать свойство 'value' из 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;

Ответы [ 2 ]

0 голосов
/ 28 ноября 2018

Я думаю, что есть несоответствие в id.В строке 1 вы указали «scbytecode». В строке 2 вы пытаетесь получить доступ по идентификатору «smartcontract», которого нет, поэтому вы видите ноль

0 голосов
/ 28 ноября 2018

Есть лучший способ сделать это в React, используя state и не обращаясь напрямую к DOM, чего следует избегать.

Сохраните значение input в состоянии компонента, затем передайте егок обработчику события onClick кнопки через this.state.inputVal.

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...