Question

好的，所以我开始了解ReactJs，但是仍然被一个简单的概念所困扰，这个概念是一个简单的旧jQuery。

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

这是我想要解释的简单模型。点击按钮，我想将新内容注入到ID为＃34; newComments＆＃34;的div中。 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的文档周围寻找并找不到答案..

Answer 1

反应中没有操纵HTML / DOM的概念。 React只负责基于组件状态的渲染。每个组件都会呈现它当前的状态。

所以你需要操纵其他组件的状态。因为Facebook正在使用Flux。这是一个更复杂的工作流程，但一旦你得到它，它实际上是非常简单的概念。

在一个组件上单击您调度操作。该操作将触发事件，订阅该事件的存储将作出反应并更新内部状态。更新后，存储会发出更改事件，所有侦听该存储中更改的组件都将更新。

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

将一个反应组件中的内容注入到另一个反应组件上

1 个答案: