0
var Button = React.createClass({
  render: function () {
    return (
      <div className="buttons">
        <input type="submit" className="form__btn" onClick={this.props.receiveCode} value={this.props.visible ? 'Отправить код' : 'Получить код'} />
      </div>
    );
  }
});

var App = React.createClass({
  getInitialState: function () {
    return {
      visible: false,
      phone: null,
      phoneValid: false,
    }
  },
  receiveCode: function (e) {
    e.preventDefault();
    console.log(ВЫВЕСТИ СЮДА);
    this.setState({
      visible: true
    })

  },
  getphone: function (e) {
    this.setState({
      phoneValue: e.target.rawVvalue,
      phone: e.target.value
    })
  },
  render: function () {
    var visible = this.state.visible;
    var phone = this.state.phone; //ВОТ ЭТУ ПЕРЕМЕННУЮ ВЫВЕСТИ В ФУНКЦИЙ 
    var phoneValid = this.state.phoneValid;
    if (visible) {
      return (
        <form className="form">
          <h1 className="form__title">React</h1>
          <div className="form-wrap">
            <label>Ваш номер телефона</label>
            <input className="form__input" placeholder="+7 (###) ### - ## - ##" value={phone} disabled />
            <label>Код</label>
            <input className="form__input" placeholder="Код" />
            <Button visible={this.state.visible} receiveCode={this.receiveCode} />
          </div>
        </form>
      );
    } else {
      return (
        <form className="form">
          <h1 className="form__title">React</h1>
          <div className="form-wrap">
            <label>Ваш номер телефона</label>
            <Cleave className="form__input" onChange={this.getphone} options={{ delimiters: ['+', '7 ', '(', ') ', ' - ', ' - '], blocks: [0, 0, 0, 3, 3, 2, 2] }} placeholder="+7 (###) ### - ## - ##" />
            <Button visible={this.state.visible} receiveCode={this.receiveCode} />
          </div>
        </form>
      );
    }
  }
});

ReactDOM.render(
  <App />,
  document.querySelector('#root')
);

Переменную phone вывести в функций receiveCode. Не пойму как я пробовал просто console.log(phone), но оне ее не видит

1 ответ 1

0

Функция render() должна быть чистой. Это означает, что она не может изменять состояние компонента напрямую или через другие функции иначе происходит бесконечный цикл: после смены стейта вызывается рендер, который меняет стейт, который вызывает рендер, который меняет стейт ....

receiveCode: function (code) {    
  console.log(code);
  // из render функции нельзя менять стейт
},

...

render() {
    var visible = this.state.visible;
    var phone = this.state.phone; 
    this.receiveCode(phone);  // вызываем метод класса с переменной
    this.receiveCode(123);  // вызываем метод класса с переменной
...

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.