ОК, так что я начинаю размахивать вокруг ReactJs, но все равно теряю одну простую концепцию, которая является неудачей с простым старым jQuery.вводят содержимое от одного реагирующего компонента к другому onClick
Я хочу, чтобы добавить к содержимому одного элемента на экране, когда событие щелчка происходит на другом. После react tutorial я полностью понимаю, как они достигли добавления в список комментариев, список комментариев - это ребенок родителя, который устанавливает состояние. Но это не может быть единственным способом, поскольку он чувствует себя очень жестким и негибким.
Вот простой макет того, что я пытаюсь объяснить. По щелчку кнопки, я хочу, чтобы ввести новое содержимое в DIV с идентификатором «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>
Я охотился вокруг Google и документы для yonks и не могу найти ответ ..