十五、子组件回调父类方法带参数的写法

发表于 | 分类于 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import LabelEditor from '../../components/LabelEditor';

export default class GatherDetailPage extends Component {
	
	
	render(){
		return (
			<LabelEditor
				viewKey='address'
				onDataLoaded={this.updateData}
			/>
        );
	}
	
	updateData(key, inputText) {
        console.warn('key: ' + key+",inputText: " + inputText);
    }
}

可以看到GatherDetailPage的界面展示的是子控件 LabelEditor，并传递了 viewKey 和 onDataLoaded给子控件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class LabelEditor extends Component {
	render() {
		return(
			<TextInput
				style={[RowStyle.blackFont15, {flex: 7, paddingLeft: 10, height: '100%'}]}
				underlineColorAndroid={'transparent'}
				placeholder={this.props.hint}
				placeholderTextColor='#bbb'
				multiline={false}
				onChangeText={(text) => {
					this.props.onDataLoaded(this.props.viewKey, text)
				}}
				value={this.props.value}
			/>
		);
		
	}
}

可以看到。每输入一个字符。 都会在界面打印出： key: address, inputText: 你输入的字符 这样的内容。
这种写法有个弊端：viewKey是父亲传递给子控件 LabelEditor的，而子控件又在onChangeText方法中，又传回给父亲。能不能不用传递，在回调父亲方法时，父亲方法直接带上呢？看第二中写法：


方式二

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import LabelEditor from '../../components/LabelEditor';

export default class GatherDetailPage extends Component {
	
	
	render(){
		return (
			<LabelEditor
				onDataLoaded={(inputValue) => this.updateData('address', inputValue)}
			/>
        );
	}
	
	updateData(key, inputText) {
        console.warn('key: ' + key+",inputText: " + inputText);
    }
}

对比一下方式一，可以看到父类中引用 LabelEditor时不需要viewKey属性了。这里只是为了看的更直观，所以写了个常量address, 这里可以写任意你需要的变量值。
再来看儿子控件写法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class LabelEditor extends Component {
	render() {
		return(
			<TextInput
				style={[RowStyle.blackFont15, {flex: 7, paddingLeft: 10, height: '100%'}]}
				underlineColorAndroid={'transparent'}
				placeholder={this.props.hint}
				placeholderTextColor='#bbb'
				multiline={false}
				onChangeText={(text) => {
					this.props.onDataLoaded(text)
				}}
				value={this.props.value}
			/>
		);
		
	}
}

方式二相比方式一。少了将变量由父亲传给儿子，再由儿子传回父亲的循环过程。推荐方式二。