React Native -- 如何编辑动态生成的 TextInput 字段的值？

Question

我正在尝试编辑动态生成的 TextIput 字段值的值。

这是我的 JSON 数组

{
    "measurements": [{
        "id": 200,
        "sub_type_id": 34,
        "sub_type": "TOPS SL",
        "measurement_input": "15"
    }, {
        "id": 201,
        "sub_type_id": 47,
        "sub_type": "TOPS ABOVE CHEST",
        "measurement_input": "40"
    }, {
        "id": 202,
        "sub_type_id": 48,
        "sub_type": "TOPS CHEST",
        "measurement_input": "42"
    }]
}

基于上述 JSON 数组数据我动态创建了 TextInputs，但问题是我无法编辑 TextInputs 值。

创建 TextInput 的代码

     ....
     this.state = {
         ...
         subtypes: props.route.params.editdata.measurements,
         inputData: [],
         ...
     }
     ...

     {this.state.subtypes.map((inputs, idx) => {
                    return (
                      <View style={{flex: 1, padding: 2, margin: 10}}>
                        <Text style={{margin: 2}}>{inputs.sub_type}</Text>
                        <View
                          style={{
                            flex: 1,
                            flexDirection: 'row',
                            alignItems: 'center',
                          }}>
                          <View style={{flex: 1}}>
                            <TextInput
                              style={styles.textInput}
                              placeholder={inputs.sub_type}
                              value={inputs.measurement_input} //<------ value not able to change
                              onChangeText={(text) =>
                                this.addValues(text, idx, inputs.sub_type_id)
                              }
                            />
                          </View>
                        </View>
                      </View>
                    );
                  })}

这是从 TextInput 取值的函数。

//------ HERE I am not able to do editable parts --------
  addValues = (text, index, id) => {
    let dataArray = this.state.inputData;
    let checkBool = false;
    if (dataArray.length !== 0) {
      dataArray.forEach((element) => {
        if (element.index === index) {
          element.measurement_input = text;
          element.sub_type_id = id;
          checkBool = true;
        }
      });
    }
    if (checkBool) {
      this.setState({
        inputData: dataArray,
      });
    } else {
      dataArray.push({measurement_input: text, index: index, sub_type_id: id});
      this.setState({
        inputData: dataArray,
      });
    }
  };

我尝试了很多技术，但无法执行可编辑的值。

Answer 1

为什么要使用 this.state.subtypes 渲染和设置 inputData 的状态？

Answer 2

我只用了两行代码就修复了它。

不需要将更新后的值复制到另一个数组（inputData 状态数组）。只更新到同一个数组（subtypes 包含我实际编辑的 json 数据的状态数组）并且我使用了 this.forceUpdate(); javascript 函数。

这是更新后的代码，所有更新后的值都将包含在 this.state.subtypes .

    {this.state.subtypes.map((inputs, idx) => {
                        return (
                          <View style={{flex: 1, padding: 2, margin: 10}}>
                            <Text style={{margin: 2}}>{inputs.sub_type}</Text>
                            <View
                              style={{
                                flex: 1,
                                flexDirection: 'row',
                                alignItems: 'center',
                              }}>
                              <View style={{flex: 1}}>
                                <TextInput
                                  style={styles.textInput}
                                  placeholder={inputs.sub_type}
                                  value={inputs.measurement_input}
                                  onChangeText={(text) =>
                                    {
//this.addValues(text, idx,inputs.sub_type_id, inputs.measurement_input)  //<----- no need
                                   
    
                                    // these two line of codes work out 
                                    this.state.subtypes[idx].measurement_input = text
                                    this.forceUpdate();
                                    }
                                  }
                                />
                              </View>
                            </View>
                          </View>
                        );
                      })}

React Native -- 如何编辑动态生成的 TextInput 字段的值？

React Native -- How to edit the value of dynamically generated TextInput fields?

javascript

reactjs

react-native

react-native-android