react 常见api 使用（长期更新）

1、父子通信

1.1 父-子 props

父组件：

    class myPage extends React.Component {
           render() {
                return (
                  <div>
                    {/* 子组件   自定义page 是子组件要接受的属性   mypage是要传递的内容*/}
                    <TabBar page="mypage"></TabBar>
                        <div className="pd-md">
                        我是一个mypage
                      </div>
                  </div>
            );
      }
}

子组件：

class TabBarComponents extends React.Component {
  constructor(props) {
    // 继承父组件
    super(props);
    this.state = {
    // 接受父组件传的属性
      selectedTab: props.page,
    };
  }
// 然后使用 this.state.selectedTab  这个值， 这个就是mypage
....
}

1.2

子-》父

子组件：将子组件的value值 text 传递给父组件

    class Input extends Component {
        changeTitle(event) {
            // 子组件调用 父组件通过props传递过来的方法 onChangeText，将要传递的值传进方法
            this.props.onChangeText(event)
        }
        componentDidMount() {
            this.props.getParentTab(1)
        }
        render() {
          return (
            <div className="list-wrapper">
               <input type="text"  onChange={this.changeTitle.bind(this)} value={this.props.text} />
                <input type="text"  onChange={this.props.getParentTab('2')} value={this.props.text} />
            </div>
          );
        }
  }

父组件：

class myPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {newText: 'default'};
  }
  changeText(event) {
    this.setState({
      newText: event.target.value,
    })
  }
    getParentTab = (tab) => {
        console.log(tab)
    }
  render() {
    return (
      <div>
       <div className="pd-md">
          <h3>我是一个mypage</h3>
          <div>
            {this.state.newText}
            {/* 子组件 */}
            <InputCompenent onChangeText={this.changeText.bind(this)} text={this.state.newText}></InputCompenent>
            <SlideFirst className="content" getParentTab={getParentTab} />
          </div>
        </div>

      </div>
    );
  }
}

子组件通过调用 props.onChangeText 方法，将值传递进来，父组件通过 changeText 方法来接受 传递进来的值。

套路：子组件通过调用 父组件传递的方法 传值。

父组件调用子组件的方法：

父组件

onRef = (ref) => {
    this.child = ref
  }

addEtcItem = () => {
    this.child.add(); // 调用子组件的方法
  }
....
     <ChildItem
                onRef={this.onRef}
            />

子组件：

    add = () => {
      // todo
    };

2、在标签上写样式的方法

{
          <div style={{
            display: this.state.hasMore ? 'none' : 'block',
            textAlign: 'center',
            borderTop: '1px solid #ddd',
            width: '80%',
            paddingTop: '15px',
            marginLeft: 'auto',
            marginRight: 'auto',
            marginBottom: '70px'
          }}>
          不要扯了，已经到底了！
          </div>
 }

3、input type="file" onchange 获取 e.target

DOM:
 <input type="file" id="uploadExcel" onChange={this.uploadFiles} className="beauty-input"/>

js:
 uploadFiles = (e) => {
    e.persist(); // 不然e.target 为null
    console.log(e)
    ....