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

Question

好的，所以我开始了解 ReactJs，但一直被一个简单的概念难倒，这个简单的概念是轻而易举的 jQuery。

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

这是我要解释的内容的简单模型。单击按钮后，我想将新内容注入到 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

在 React 中没有操作 HTML / DOM 的概念。 React 只负责基于组件状态的渲染。每个组件都呈现其当前状态。

所以你需要操纵其他组件的状态。为此，Facebook 使用 Flux。这是一个有点复杂的工作流程，但是一旦你明白了，它实际上是一个非常简单的概念。

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

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

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

inject content from one react component to another onClick

javascript

reactjs