父组件提交表单之后,想要根据获取的返回值,来修改子组件(Alert组件)的props值来。有没有类似setState()这样的方法可用?
这里有个前提: 最好不要使用到父组件的state,因为父组件的state里存储了表单信息,我将父组件的state直接转字符后POST出去,如果Alert的信息也放里面,表单提交会出错。 (也可以讲一下我这样做可不可取,有什么缺点。)
父组件代码:
'use strict';
import React from 'react' ;
import Header from './../Component/Header/Header' ;
import Footer from './../Component/Footer/Footer' ;
import Alert from './../Component/Alert/Alert' ;
import AjaxSend from './../Server/ajaxsend' ;
class Register extends React.Component {
constructor(props){
super(props);
this.state = {
email:"",
password:""
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this)
}
handleChange(e) {
this.setState({[e.target.name]: e.target.value})
}
handleSubmit(e) {
e.preventDefault();
AjaxSend('POST','/users', this.state, (res) => {
// 根据返回值,改变Alert组件的props
console.log(res)
})
}
render(){
return (
<form onSubmit={this.handleSubmit}>
<input type="email" className="form-control" name="email" placeholder="Email" value={this.state.email} onChange={this.handleChange} />
<input type="password" className="form-control" name="password" placeholder="Email" value={this.state.email} onChange={this.handleChange} />
<button type="submit" className="btn btn-primary">提交</button>
<Alert tit="ok" text="注册成功~" />
</form>
) ;
}
}
export { Register as default } ;
子组件:
'use strict';
import React from 'react' ;
class Alert extends React.Component {
render() {
return (
<div className="alert" role="alert">
<strong>{this.props.tit} </strong>
{this.props.text}
</div>
);
}
}
export { Alert as default } ;
顺便问一句,react有没有增加/删除组件的方法?Alert组件的显示和关闭用什么方案比较好?
谢谢。
react state驱动ui的改变
1.子组件的props就是父组件的属性
2.并不可取
可以改变一下 state
的结构为这样吧:
this.state = {
form: ...,
showAlert: ...,
alertMessage: ...,
}
也能达到 Alert 组件显示关闭