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

【问题标题】：Input does not allow empty in react-nativereact-native 中的输入不允许为空
【发布时间】：2020-09-15 07:36:13
【问题描述】：

我有一个函数可以通过映射 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>
        )
      })
    }

【问题讨论】：

item.PSCount = PSCount.toString() 不会改变状态。
如果你想屏幕重新渲染或跳过标签输入中的参数值，你需要使用setState，如果你不想在这种情况下使用状态
关于state，如何更新每个单独项目的状态值？每个单独的输入都不会在 State 上声明。我只面对更新静态输入文本，而不是动态。这是我第一次尝试这种类型。
使用类似这样的东西来更新array = this.setState({ arr:this.state.ServiceData.map(value=>{if(updatingindex){return updated value}else return oldvalue;})中的每个项目，您可以从渲染中获取更新索引和更新值

标签： javascript arrays reactjs react-native

【解决方案1】：

目前，我从here 找到了一些解决方案。所以我可以覆盖每个值。

为 textchange 创建新事件：-

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

对于我的文本输入映射：-

  <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 状态变化的人。平均而言，onChangeText 总是需要更新状态。

【讨论】：