代码之家  ›  专栏  ›  技术社区  ›  Ricky Dam

使用setNativeProps重置/更改选择器(下拉菜单)selectedValue

  •  2
  • Ricky Dam  · 技术社区  · 7 年前

    我有一个带有TextInput、选择器和TouchHiglight的表单。

    我可以使用ref重置TextInput,但我不知道如何将选择器值更改/重置为默认值。

    可能未经处理的承诺拒绝
    TypeError:这个。值2ref。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() 但我这样做是为了证明一点,而且,没有 clear() 对于选择器。

    1 回复  |  直到 7 年前
        1
  •  1
  •   Kevin Peña    7 年前

    我认为你不应该用裁判来做这件事。

    您正在使用中的回调正确更新状态 onChangeText onValueChange 但您不是从状态进行渲染,因此需要添加 value 支撑到 TextInput 你已经在使用 selectedValue 对于选取器,因此有不同的行为(不过道具中使用的值可能是错误的)。

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

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

    有了这一套,你只需要在你的onSubmit中使用它。

    onSubmit() {
      this.setState({value1: '', value2: ''});
    }