好吧，我开始了解 ReactJs，但一直被一个简单的概念所困扰，这个概念对于普通的旧式 jQuery 来说简直就是轻而易举。
当点击事件发生在另一个元素上时，我希望能够添加到屏幕上一个元素的内容。继react tutorial我完全理解他们实现添加到评论列表的方式，评论列表是设置状态的父级的子级..但这肯定不是唯一的方法，因为它感觉非常僵化和不灵活。
这是我想要解释的内容的简单模型。单击按钮后，我想将新内容注入(inject)到 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>
我一直在谷歌和 yonks 的文档中寻找答案，但找不到答案。
最佳答案
在 React 中，没有操作 HTML/DOM 的概念。 React 只负责根据组件状态进行渲染。每个组件都会呈现其当前状态。
所以你需要操纵其他组件的状态。为此，Facebook 正在使用 Flux。这是一个有点复杂的工作流程，但是一旦你掌握了它，它实际上是非常简单的概念。
在一个组件上单击即可调度一个操作。该操作将触发事件，订阅该事件的商店将作出 react 并更新内部状态。更新后，存储会发出更改事件，所有监听该存储中更改的组件都会更新。
是的，您将需要编写更多代码。如果组件正在操纵它自己的状态，那么它会变得更加简单，那么只需在组件内部调用 this.setState({ ... }) 就足够了。是的，还有其他方法可以做到这一点。
关于javascript - 将一个 React 组件的内容注入(inject)到另一个 onClick，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30293037/