React props refs

state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。
props 组件之间的通信
props用于定义外部接口，state用于记录内部状态
props的赋值在于外部世界使用组件，state的赋值在于组件内部
组件不应该改变props的值，而state存在的目的就是让组件来修改的

class WebSite extends React.Component {
  constructor() {
      super();
 
      this.state = {
        name: "菜鸟教程",
        site: "https://www.runoob.com"
      }
    }
  render() {
    return (
      <div>
        <Name name={this.state.name} />
        <Link site={this.state.site} />
      </div>
    );
  }
}
 
 
 
class Name extends React.Component {
  render() {
    return (
      <h1>{this.props.name}</h1>
    );
  }
}
 
class Link extends React.Component {
  render() {
    return (
      <a href={this.props.site}>
        {this.props.site}
      </a>
    );
  }
}


1，子组件调用父组件的方法
（1）子组件要拿到父组件的属性，需要通过 this.props 方法。
（2）同样地，如果子组件想要调用父组件的方法，只需父组件把要被调用的方法以属性的方式放在子组件上，
子组件内部便可以通过“this.props.被调用的方法”这样的方式来获取父组件传过来的方法。

Parent组件

Child组件
onchange="{this.props.handleEmail}/"

2，父组件调用子组件的方法
在 ReactJS 中有个叫 ref 的属性。这个属性就像给组件起个引用名字一样，子组件被设置为 ref 之后（比如 ref=“xxx”）。父组件便可以通过 this.refs.xxx 来获取到子组件了。

父组件
this.refs.getSwordButton.sendSword();


constructor(props) {
  // 调用父类(Component)的构造函数
  super(props) 
}

　　

if(this.refs.ExperimentTitleaa.state.value == undefined){
　　message.error("请输入名称");
　　return;
}else if(this.refs.ExperimentDescribedaa.state.value == undefined){
　　message.error("请输入描述");
　　return;
}else if(this.refs.dataMartaa.state.value == undefined){
　　message.error("请输入测试地址");
　　return;
}else if(this.refs.ScoringProgramImageaa.state.value == undefined){
　　message.error("请输入训练地址");
　　return;
}else{
　　this.setState({
　　　　visible: false,
　　});
}

this.refs.ExperimentTitleaa.state.value = undefined
this.refs.ExperimentDescribedaa.state.value = undefined
this.refs.dataMartaa.state.value = undefined
this.refs.ScoringProgramImageaa.state.value = undefined

 

if(this.refs.ExperimentTitleaa || this.refs.ExperimentDescribedaa || this.refs.dataMartaa || this.refs.ScoringProgramImageaa){
　　this.refs.ExperimentTitleaa.state.value = undefined
　　this.refs.ExperimentDescribedaa.state.value = undefined
　　this.refs.dataMartaa.state.value = undefined
　　this.refs.ScoringProgramImageaa.state.value = undefined
}

---------------------------------------------------------------------------------------------

if (this.refs.pytorchjobsMasterfuben.props.value ==null) { pytorchjobs
　　} else if (this.state.workerFusz == null || this.refs.pytorchjobsWorkerfuben.props.value == "") {

}