связать это и отправить обработчику - PullRequest
Новая
       26

связать это и отправить обработчику

0 голосов
/ 09 января 2019

Я знаю, что могу связать this несколькими способами, реагируя следующим образом: 

<button onClick={this.onSelect.bind(this, data)}>Button</button>

или 

<button onClick={() => this.onSelect(data)}>Button</button>

или 

constructor(props) {
   super(props);
   this.onSelect= this.onSelect.bind(this)
}
<button onClick={this.onSelect}>Button</button>

Проблема в том, что я не могу отправить данные, используя третий вариант. Есть ли возможность использовать третий вариант и отправлять данные?

Ответы [ 2 ]

0 голосов
/ 09 января 2019

С новой функцией стрелки, введенной синтаксисом ES6, вы можете забыть о bind. Функция стрелки автоматически свяжется с контекстом своего класса. Создание вашей onSelect функции стрелки решит вашу проблему.

Чтобы отправить ваши данные, вы можете предварительно сконфигурировать свою функцию для получения 2 наборов параметров, первый из которых - ваши данные, а второй - событие щелчка: 

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

  onSelect = msg => event => {
    this.setState({ msg })
  }
  
  render() {
    const { msg } = this.state

    return (
      <div className="App">
        <h3>{msg ? 'Yay, data : ' + msg : 'Click it !'}</h3>
        <button onClick={this.onSelect('I sent data !')}>Button</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.3.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>
0 голосов
/ 09 января 2019 

class App extends React.Component {
  constructor(props) {
    super(props);
    this.onSelect = this.onSelect.bind(this);
  }

  onSelect(e) {
    alert(e);
  }
  render() {
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <button onClick={event => this.onSelect(event)}>Button</button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, document.body);
<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>

<div id="root"></div>

Вы можете использовать ES6 Arrow Function для отправки данных здесь, это называется анонимной функцией вызова: 

constructor(props) {
   super(props);
   this.onSelect= this.onSelect.bind(this)
}
<button onClick={(event) => this.onSelect(event)}>Button</button>

Вот так.

...