将内容从一个React组件注入到另一个onClick

Question

好的，所以我开始着手ReactJs了，但是一直被一个简单的概念所困扰，这个简单的概念与普通的旧jQuery混在一起。

我希望能够在单击事件发生在另一个元素上时将其添加到屏幕上一个元素的内容中。 按照反应教程，我完全理解他们实现了添加到评论列表的方式，评论列表是设置状态的父级的子级。.但是，这肯定不是唯一的方法，因为它感觉非常僵化和不灵活。

这是我要解释的一个简单模型。 在单击按钮时，我想将新内容注入ID为“ newComments”的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>

我一直在寻找Google和yonks的文档，却找不到答案。

Answer 1

在反应中，没有操纵HTML / DOM的概念。 React只负责根据组件状态进行渲染。 每个组件都会呈现其当前状态。

因此，您需要操纵其他组件的状态。 为此，Facebook正在使用Flux。 工作流程稍微复杂一点，但是一旦掌握了它，它实际上就是一个非常简单的概念。

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

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

将内容从一个React组件注入到另一个onClick

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-05-17 23:37:39

将内容从一个React组件注入到另一个onClick

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-05-17 23:37:39

解决方案1
1 已采纳 2015-05-17 23:37:39