从一个反应组件向另一个反应组件注入内容onClick

好的，所以我开始让我的头绕着ReactJs，但一直被一个简单的概念困扰着，它是一个简单的旧jQuery的简单概念。从一个反应组件向另一个反应组件注入内容onClick

我希望能够在点击事件发生在另一个元素上时添加到屏幕上的一个元素的内容。在react tutorial之后，我完全理解他们已经实现了添加到评论列表的方式，评论列表是父母的设置状态的孩子..但肯定这不是唯一的方式，因为它感觉非常僵硬和僵化。

下面是我想解释的一个简单模型。在按钮的点击，我想注入新的内容到DIV ID为“newComments” .. JSBin：http://jsbin.com/vokufujupu/1/edit

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script> 
</head> 
<body> 
    <div id="content"></div> 
    <script type="text/jsx"> 

     var InputBox = React.createClass({ 
      clickHandler: function(){ 
       //Append a new string to the end of the existing copy in the copy box 
       alert('after this alert the value of the button should be appended to the content of the div#newComments'); 

      }, 
      render: function() { 
       return (
         <div classNmae="copyBox"> 
          <input type="button" name="inputButton" value="click me button" className="bbbc" 
          onClick={this.clickHandler} /> 
         </div> 
      ); 
      } 
     }); 

     var CopyBox = React.createClass({ 
      render: function() { 
       return (
       <div classNmae="copyBox"> 
        <p>div#newComments:</p> 
        <div id="newComments"></div> 
       </div> 
      ); 
      } 
     }); 

     var Page = React.createClass({ 
      render: function() { 
       return (
        <div> 
         <CopyBox/> 
         <InputBox/> 
        </div> 
      ); 
      } 
     }); 

     React.render(
       <Page/>, 
       document.getElementById('content') 
    ); 

    </script> 

    <!-- The equiv in plain old js --> 
    <script type="text/javascript"> 
    function newContent(obj){ 
     document.getElementById('vanBox').innerHTML = document.getElementById('vanBox').innerHTML + obj.value; 
    } 
    </script> 
    <div id="vanilaJsEquiv"> 
    <div id="vanBox"></div> 
    <input type="button" value="ClickyClik" onclick="newContent(this)"/> 
    </div>  

</body> 
</html>

我一直在四处狩猎谷歌及yonks的文档，并不能找到答案..

来源

2015-05-17 John

在反应没有操纵HTML/DOM的概念。 React只负责基于组件状态进行渲染。每个组件呈现任何当前状态。因此你需要操纵其他组件的状态。为此，Facebook使用Flux。这是一个更复杂的工作流程，但一旦你得到它，它实际上是非常简单的概念。

在其中一个组件上点击发送一个动作。该操作将触发事件，订阅该事件的商店将作出反应并更新内部状态。更新后，商店发出更改事件，监听该商店中更改的所有组件都将更新。

是的，你需要编写更多的代码。如果组件正在操作它自己的状态，它会变得更简单，那么只需在组件内部调用this.setState({ ... })即可。是的，有其他方法可以做到这一点。

来源

2015-05-17 23:37:39

从一个反应组件向另一个反应组件注入内容onClick

回答

相关问题