На клик кнопки, сделанной в одном компоненте, не изменяется значение в другом компоненте в React.js

Я пытаюсь сделать Button для увеличения значения в React.js, чтобы узнать связь между двумя компонентами. Один компонент - это только кнопка, показывающая +1, а другой компонент - это значение, которое будет увеличиваться по нажатию этой кнопки.На клик кнопки, сделанной в одном компоненте, не изменяется значение в другом компоненте в React.js

Я написал этот код, но не смог найти, почему значение не отображается.

Примечание: У меня есть только один день опыта работы в React.js.

Вот мой код:

<!DOCTYPE html> 
<html> 

    <head> 
    <link rel="stylesheet" href="style.css"> 

    </head> 

    <body> 
    <div id="root"></div> 
    <script src="https://unpkg.com/[email protected]/dist/react.js"></script> 
    <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script> 
    <script src="https://unpkg.com/[email protected]/browser.min.js"></script> 
    <script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script> 
    <script src="https://unpkg.com/[email protected]/dist/remarkable.min.js"></script> 

    <script type="text/babel"> 
     var Button = React.createClass({ 
     render : function(){ 
      return (
      <button>+1</button> 
     ) 
     } 
     }); 

     var Counter = React.createClass({ 
     render : function(){ 
      return (<div>Hello {this.props.updValue}</div>); 
     } 
     }); 

     var App = React.createClass({ 
     getInitialState : function(){ 
      return {count : 0 }; 
     }, 
     increment : function(){ 
      this.setState({counter:this.state.count + 1}); 
     }, 
     render: function(){ 
      return ( 
      <div> 
       <Button onClick={this.increment} updValue={this.state.count}/> 
       <Counter /> 
      </div> 
      ); 
     } 
     }); 

     ReactDOM.render(<App />,document.getElementById("root")); 
    </script> 
    </body> 

</html>

(https://plnkr.co/edit/SVTfEc5jx5Q15B1c07GB)

EDIT: После обучения из кода Петра Berebecki, я модифицировал существующий код для добавления на значение, на котором была сделана нажмите. https://plnkr.co/edit/VL5961FB0mrm4QlxuO9T

источник

2016-09-22 Tushar Khanna

Вы никогда не изменить текст, поэтому он никогда не изменяется от +1, вы просто установить состояние ... – Li357

На самом деле я не хочу, чтобы изменить текст кнопки. .. Я хочу что-то, что при нажатии кнопки +1, после Привет, это должно прийти 1..2 ... 3 и так далее ... Надеюсь, ты меня достал. –

Пожалуйста, ознакомьтесь с этой демонстрацией: http://codepen.io/PiotrBerebecki/pen/NRdAON и приведенный ниже код.

Проблемы, которые я заметил в вашем коде:

В функции increment() вы использовали
this.setState({counter:this.state.count + 1});, и он должен быть this.setState({count:this.state.count + 1});
В App метод отрисовки вы использовал onClick событие. Это должно быть в методе рендеринга самого компонента Button.
Вам также нужен пропеллер (который я назвал по причинам ясности passClick), переданный от родителя (App) ребенку (Button). Затем Button может использовать эту опору в своем методе handleClick(). Затем он будет принят App, ссылаясь на метод increment().

Реагировать код:

var Button = React.createClass({ 
    handleClick: function() { 
    console.log('1. Received click in Button'); 
    this.props.passClick(); 
    }, 
    render: function() { 
    return (
     <button onClick={this.handleClick} >+1</button> 
    ) 
    } 
}); 

var Counter = React.createClass({ 
    render: function() { 
    return (<div>Hello {this.props.updValue}</div>); 
    } 
}); 

var App = React.createClass({ 
    getInitialState: function() { 
    return { 
     count: 0 
    }; 
    }, 
    increment: function() { 
    this.setState({ 
     count: this.state.count + 1 
    }); 
    console.log('2. Received click in App'); 

    }, 
    render: function() { 
    return (
     <div> 
     <Button passClick={this.increment}/> 
     <Counter updValue={this.state.count}/> 
     </div> 
    ); 
    } 
});

источник

2016-09-22 06:11:12

Благодарим за исправление моего кода, а также предоставим мне лучший код в Кодепене. Это действительно полезно. –

На клик кнопки, сделанной в одном компоненте, не изменяется значение в другом компоненте в React.js

ответ

Смежные вопросы