Question

我有一个带有TextInput，Picker和TouchableHiglight的表单。

用户将在TextInput中输入内容，从Picker中选择一个项目并使用TouchableHighlight提交。

我可以使用ref来重置TextInput，但我无法弄清楚如何将Picker值更改/重置为默认值。

可能未处理的承诺拒绝
TypeError：this.value2ref.setNativeProps不是函数

阵营天然

constructor(props) {
  super(props);
  this.state = {
    value1: '',
    value1ref: '',
    value2: '',
    value2ref: ''
  }
}

<TextInput
  onChangeText={(text) => this.setState({value1:text})}
  ref={input => {this.value1ref=input}}
/>

<View>
  <Picker
    selectedValue={this.state.value1}
    onValueChange={(itemValue, itemIndex) => this.setState({value2: itemValue})}
    ref={input => {this.value2ref=input}}>
    <Picker.Item label="Pick an item" value="" />
    <Picker.Item label="Item 1" value="Item1" />
    <Picker.Item label="Item 2" value="Item2" />
    <Picker.Item label="Item 3" value="Item3" />
  </Picker>
</View>

<View>
  <TouchableOpacity onPress={this.onSubmit.bind(this)}>
    <View>
      <Text>SUBMIT</Text>
    </View>
  </TouchableOpacity>
</View>

我也尝试过这种类型的参考，但无济于事。

ref={component => this._exampleref=component}>

的JavaScript

onSubmit() {
  this.value1ref.setNativeProps({ //This one works
    text: "",
  });
  this.value2ref.setNativeProps({ // This one does NOT work
    selectedValue: "",
  });
}

我知道我可以使用this.value1ref.clear()，但我这样做是为了证明一个观点，而且Picker没有clear()。

Answer 1

我认为你不应该使用refs。

您正在使用onChangeText和onValueChange中的回调正确更新状态，但您没有从状态渲染，因为您需要将value道具添加到{{ 1}}你已经使用TextInput作为选择器，因此行为不同（虽然道具中使用的值可能是错误的。）

selectedValue

和

<TextInput
  onChangeText={(text) => this.setState({value1:text})}
  value={this.state.value1}
/>

使用该套装，您只需在onSubmit中使用此功能。

<Picker
  selectedValue={this.state.value2}
  onValueChange={(itemValue) => this.setState({value2: itemValue})}
  >
  {/* ... */}
</Picker>

使用setNativeProps重置/更改选择器（下拉列表）selectedValue

1 个答案: