react-native - 当通过网络调用改变状态时，在 textinput 上响应 Native 调用 onChange

Question

一旦更改网络调用触发并从服务器获取一些值，我就有一个下拉列表现在我想动态更改输入值，但是一旦我在网络调用后设置状态，onchange 就不会触发。

带渲染的输入屏幕

<SearchableDropdown  style={styles.inputBox}
      onTextChange={this.onChangeText}
      selectedItems={this.state.selectedItems}
      onItemSelect={(item) => {
          const items = this.state.selectedItems;
          this.setState({ serviceid: JSON.stringify(item.id) });
          this.getServiceCategories(JSON.stringify(item.id))
          this.setState({
            CategoryName:this.state.CategoryName
          });
      }}

      containerStyle={{ padding: 5 }}
      textInputStyle={{
        padding: 12,
        borderWidth: 1,
        borderColor: '#ccc',
        borderRadius: 15,
        color: '#000',
        width:300
      }}
      itemStyle={{
        padding: 10,
        marginTop: 2,
        backgroundColor: '#ddd',
        borderColor: '#fff',
        borderWidth: 1,
        borderRadius: 15,
        color: '#000',
      }}
      itemTextStyle={{ color: '#000' }}
      itemsContainerStyle={{ maxHeight: 240 }}
      items={this.state.serviceData}
      defaultIndex={0}
      placeholder="Select Service"
      name="serviceid"
      resetValue={false}
      underlineColorAndroid="transparent"
    />

    <Field style={styles.inputBox}
        name="categoryid"
        value={this.state.CategoryName}
        placeholder="Category"
        returnKeyLabel={this.state.CategoryID}
        component={this.renderTextInput}

        />


        <Field style={styles.inputBox}
            name="subcategoryid"
            value={this.state.SubCategoryName}
            returnKeyLabel={this.state.SubCategoryID}
            placeholder="Sub Category"
            component={this.renderTextInput}
            />

渲染输入

renderTextInput = (field) => {
    const {meta: {touched, error}, label, secureTextEntry, maxLength,value, keyboardType, placeholder, input: {onChange, ...restInput}} = field;

    return (
        <View>
          <InputText
              onChangeText={onChange}
              maxLength={maxLength}
              keyboardType={keyboardType}
              secureTextEntry={secureTextEntry}
              label={label}
              {...restInput} />
        {(touched && error) && <Text style={styles.errorText}>{error}</Text>}
        </View>
    );

} }

输入组件

class InputText extends Component<{}> {

state = {
    value: ""
}

componentDidMount() {
    this.setState({
        value: this.props.value
    });
}

onChangeText = (value) => {


    this.setState({
        value
    }, () => {
        this.props.onChangeText(value);
    })
}

render() {
    const {placeholder, secureTextEntry, keyboardType, maxLength, onChangeText, onSubmitEditing,value} = this.props;
    return (
        <View>
            <TextInput
                style={styles.inputBox}
                underlineColorAndroid="rgba(0,0,0,0)"
                placeholder={placeholder}
                placeholderTextColor="rgba(255,255,255,0.8)"
                selectionColor="#999999"
                secureTextEntry={secureTextEntry}
                keyboardType={keyboardType}
                maxLength={maxLength}
                returnKeyType="next"
                value={this.state.value}
                onSubmitEditing={onSubmitEditing}
                onChangeText={this.onChangeText} />
        </View>
    );
}

}

一旦下拉更改网络 api 调用

getServiceCategories =(value)=>{

 fetch('http://localhost/api/getServiceCategories?serviceid='+value)

   .then(response => { return response.json();})
   .then(responseJson => {

     this.setState({
       CategoryID:responseJson[0].CategoryID,
       SubCategoryID:responseJson[0].SubCategoryID,
       CategoryName:responseJson[0].CategoryName,
       SubCategoryName:responseJson[0].SubCategoryName,

      });

   })
   .catch(error => {
     console.error(error);
   });

 }

谢谢

标签： react-nativeredux

Answer 1

问题出在您的InputText组件中。该组件将值保持在自己的状态中，并根据其状态设置文本输入值，而不是使用道具中的值。

您有两个选择：从组件中删除状态并仅使用道具中的值 - 这样您的组件将由父级控制：

class InputText extends Component<{}> {
  render() {
    const {placeholder, secureTextEntry, keyboardType, maxLength, onChangeText, onSubmitEditing,value} = this.props;
    return (
        <View>
            <TextInput
                style={styles.inputBox}
                underlineColorAndroid="rgba(0,0,0,0)"
                placeholder={placeholder}
                placeholderTextColor="rgba(255,255,255,0.8)"
                selectionColor="#999999"
                secureTextEntry={secureTextEntry}
                keyboardType={keyboardType}
                maxLength={maxLength}
                returnKeyType="next"
                value={value} // Use `value` from props
                onSubmitEditing={onSubmitEditing}
                onChangeText={onChangeText} /> // Use `onChangeText` from props
        </View>
    );
  }
}

或者保持状态，并将值从它的 props 传递给TextInput并保持状态值作为后备，在没有设置 prop 值的情况下。

class InputText extends Component<{}> {
  state = {
    value: ""
  }

  componentDidMount() {
    this.setState({
        value: this.props.value
    });
  }

  onChangeText = (value) => {
    this.setState({
        value
    }, () => {
        this.props.onChangeText(value);
    })
  }

  render() {
    const {placeholder, secureTextEntry, keyboardType, maxLength, onChangeText, onSubmitEditing,value} = this.props;
    return (
        <View>
            <TextInput
                style={styles.inputBox}
                underlineColorAndroid="rgba(0,0,0,0)"
                placeholder={placeholder}
                placeholderTextColor="rgba(255,255,255,0.8)"
                selectionColor="#999999"
                secureTextEntry={secureTextEntry}
                keyboardType={keyboardType}
                maxLength={maxLength}
                returnKeyType="next"
                value={value || this.state.value} // Note that now the value is the value from the props and if it will be falsey, then the state value will be used as a fallback.
                onSubmitEditing={onSubmitEditing}
                onChangeText={this.onChangeText} />
        </View>
    );
  }
}