首页 > react父组件如何修改子组件的prop?

react父组件如何修改子组件的prop?

父组件提交表单之后,想要根据获取的返回值,来修改子组件(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 组件显示关闭

【热门文章】
【热门文章】