react-native 中的输入不允许为空

Question

我有一个 function 通过映射 JSON 数组来呈现其视图。 清单没问题，具有预先初始化的值，但是当我想通过删除当前值直到为空来更改每个输入的值时，它会将零“0”值传回输入，我无法向其写入任何值。 这是我第一次创建映射输入。

我希望它覆盖项目数据； 所以当按下保存按钮时，它将使用每个输入的覆盖值。

componentDidMount() {
    const { IsModify, ServiceData } = this.state;
    var tempArray = JSON.parse(JSON.stringify(AppGlobal.constObjService));
    this.setState({ ServiceData: this.state.ServiceData.concat(tempArray) });

    var arrayLength = ServiceData.length;
    for (var i = 0; i < arrayLength; i++) {
      if (IsModify === true) {

      } else if (IsModify === false) {
        var newUser = 'PSCount';
        var newValue = '0';
        ServiceData[i][newUser] = newValue;
      }

    }
    console.log('Initialize: ' + JSON.stringify(ServiceData));
}

renderServiceList() {
  return this.state.ServiceData.map((item, index) => {
    return (
      <Row style={{ backgroundColor: index % 2 == 0 ? "#f2f2f2" : "#FFFFFF" }}>
        <Col size={4} style={{ justifyContent: 'center' }}>
          <Text numberOfLines={2}>{item.ServiceName}</Text>
        </Col>
        <Col size={7} style={{ justifyContent: 'center' }}>
          <Item regular style={{}}>
            <Input
                  keyboardType={'number-pad'}
                  placeholder='Enter valid number'
                  ref={(ref) => this.PSCount = ref}
                  value={item.PSCount.toString()}
                  onChangeText={PSCount => { item.PSCount = PSCount.toString() }} />
              </Item></Col>
          </Row>
        )
      })
    }

Answer 1

至于现在，我从这里找到了一些解决方案。 所以我可以覆盖每个值。

为 textchange 创建新事件：-

  onChangeText = (PSCount, index) => {
    this.setState(prevState => {
      prevState.ServiceData[index].PSCount = PSCount
      return {
        ServiceData: prevState.ServiceData
      }
    });
  }

对于我的文本输入 map：-

  <Input style={{ paddingLeft: 20, paddingRight: 20 }}
    maxLength={3}
    blurOnSubmit={false}
    placeholder='Enter valid number'
    placeholderTextColor='rgba(0, 0, 0, 0.3)'
    keyboardType={'number-pad'}
    ref={(ref) => this.PSCount = ref}
    value={this.state.ServiceData[index].PSCount ?? '0'}
    onChangeText={PSCount => this.onChangeText(PSCount, index)}
  />

我认为它将像在 .NET Collection 数据操作中一样简单地使用。 现在我知道了。

感谢那些指出onChangeText的 state 更改的人。 也就是说， onChangeText总是需要更新 state。