Question

我有一个输入文本字段组件和用于选择框的SearchableDropdown包。我想在下拉值更改时更改字段值。

Inputtext组件：

class InputText extends Component<{}> {

state = {
    value: ""
}

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

onChangeText = (value) => {

    Alert.alert("22"+this.state.CategoryName)
    this.setState({
        value
    }, () => {
        this.props.onChangeText(value);
    })
}

render() {
    const {placeholder, secureTextEntry, keyboardType, maxLength, value, onChangeText, onSubmitEditing} = 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>
    );
}}

表格

getServiceCategories =(value)=>{

 fetch('http://192.168.1.115:80/misportal/front/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);
   });

 }
 onSubmit = (values) => {

    console.log(values);
 }
 createIncident = async (values) => {
    console.log(values);
 }
render() {
  const { handleSubmit,createIncident} = this.props;
    return(

        <View style={{flex:1,alignItems:'center'}} >

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

      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="test"
        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}
            />


    <Field
        name="subject"
        value ={this.state.Subject}
        placeholder="Subject"
        initialValue={this.state.Subject}
        component={this.renderTextInput}
        />


    <Field style={styles.inputBox}
            name="detail"
            multiline={true}
            numberOfLines={3}
            placeholder="Detail"
            component={this.renderTextInput}
             />




    <TouchableOpacity style={styles.button} onPress={handleSubmit(this.onSubmit)}>
      <Text style={styles.buttonText}>Submit</Text>
    </TouchableOpacity>

        </View>

        )
}

renderTextInput =（字段）=> { const {meta：{touched，error}，label，secureTextEntry，maxLength，value，keyboardType，placeholder，input：{onChange，... restInput}} =字段；返回（

              keyboardType={keyboardType}
              secureTextEntry={secureTextEntry}
              value={value}

              label={label}
              {...restInput} />
        {(touched && error) && <Text style={styles.errorText}>{error}</Text>}
        </View>
    );}}

下拉值更改后，我正在进行网络调用以获取数据，现在我想更新字段中的Categoryid，但值不更新。

谢谢

反应本机Redux更改下拉值更新字段值

0 个答案: