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)
....