如何将包含组件'状态的值传递回父组件
How to pass value from included component's state back to parent component?
我有一个问题,找到一种方法来轻松地从其他组件中的组件获取状态值。当我点击任何标签
如果标签被单击,我想在表单组件的列表状态中添加标签的值。有什么简单的方法吗?
我有一个这样的组件:
var Tag = React.createClass({
getInitialState: function(){
return {
checked: false
};
},
componentDidMount: function() {
this.setState({
checked: false
});
},
_onChange: function(event) {
if(this.state.checked == false){
this.setState({
checked: true
});
} else {
this.setState({
checked: false
});
}
},
render: function() {
return (
<div className="review-tag">
<input
type="checkbox"
id={this.props.id}
name={this.props.name}
checked={this.state.checked}
value={this.props.id}/>
<label htmlFor={this.props.name} onClick={this._onChange}>{this.props.name}</label>
</div>
);
return (
<div>
<span>{this.props.name}</span>
</div>
);
}
});
var allTags = tags;
var ReviewTag = React.createClass({
render: function() {
const tagComps = allTags.map(function(tag){
return <Tag {...tag}/>;
});
return (
<div>
{tagComps}
</div>
);
}
});
标签组件在渲染时包含值,我必须在我的ReviewForm组件中获得每个标签的值,它看起来像这样:
var fd = new FormData();
var ReviewForm = React.createClass({
getInitialState: function(){
return {
Author: '',
Tags: ''
};
},
componentDidMount: function() {
this.setState({
Author: author,
Tags: tags
});
},
submit: function (e){
var self;
e.preventDefault();
self = this;
var data = {
tags: this.state.Tags,
author: this.state.Author
};
for (var key in data) {
fd.append(key, data[key]);
}
$.ajax({
type: 'POST',
url: '/reviews/submit/',
data: fd,
processData: false,
contentType: false
})
.done(function(data) {
console.log('Review added successfully.');
})
.error(function(msg) {
var errors = msg.responseJSON;
console.log(errors);
});
},
render: function() {
<div className="scolumn">
<ReviewTag/>
</div>
}
})
非常感谢您的帮助
-
你不需要在
componentDidMount
中设置状态-删除这段代码。 -
真的,不能所有这些…
_onChange: function(event) {
if(this.state.checked == false){
this.setState({
checked: true
});
} else {
this.setState({
checked: false
});
}
},
被_onChange: function(event) { this.setState(checked: !this.state.cheked) }
取代?
-
allTags
应该作为属性传递,而不是作为外部作用域变量。
现在回到你的主要问题。
移动状态到父组件(ReviewForm
)。您可以将state作为具有{name: isChecked}
结构的散列(name
是Tag的名称,isChecked
是布尔值)。将其传递给ReviewTag
,并进一步传递给Tag
作为属性。也传递你的_onChange
处理程序作为属性(它应该被移动到父组件- ReviewForm
-以及)。
所以当标签被选中时,它调用ReviewForm的处理程序,ReviewForm的处理程序相应地改变自己的状态。
- 如何将输入范围的值传递给JS中的变量
- 如何将值传递给wicket中的javascript函数
- 将值传递给jquery创建的输入字段
- 需要将select标记选项值传递给ajax函数
- 使用Ajax将PHP值传递给javascript
- 将javascript值传递给PHP
- 将javascript值传递给php是正确的方法
- 将不属于表单的HTML页面中的值传递给php页面
- Angular,将文本框的动态值传给控制器
- 在key up函数上将文本框值传递给javascript
- 可以't使用ajax调用将值传递给Web服务
- 如何在同一页面上使用windows.location.href将js值传递给php时停止刷新页面
- 多个单选按钮,需要将选定的值传递给javascript
- 将 MSSQL 表值传递给 javascript
- 如何将 HTML 文档作为起始值传递给 CodeMirror
- 如何将数据存储值传递给javascript?我需要从gae数据存储中获取数据,并需要传递javascript
- 将索引值传递给javascript命名空间数组
- 将文本框值传递给javascript函数
- 如何解决将值传递给javascript函数时的错误
- 将javascript返回值传递给MVC 4中的控制器