Question

我有contactNumber和数组的数据，而Im使用native-base查看数据。

this.state = {
    leadProfile: {
      contactNumber: [
          {
          "lead_contact_number": "0912 312 412312",
          "lead_contact_number_type": {
              "lead_contact_number_type": "Mobile"
          }
      },
      {
          "lead_contact_number": "1231234rqdasd",
          "lead_contact_number_type": {
              "lead_contact_number_type": "Mobile"
          }
      },
      {
          "lead_contact_number": "0325 658 58996",
          "lead_contact_number_type": {
              "lead_contact_number_type": "Mobile"
          }
      }
      ]
    },
    contactNumber1: '',
    contactNumber2: '',
    contactNumber3: '',
    contactNumber4: '',
    contactNumber5: '',
  };
}

contactNumber1,2,3,4,5，这是数据更改时的所有容器，我也想获取特定字段上的数据

这是我的函数，也是renderData ....

arrayOfContacts是我的数据数组，对于我不擅长解决的代码感到抱歉，但这是我认为应该编码的代码，如果有好的解决方法，请放心。

此处的目标是显示和更改 lead_contact_number

的值

renderContactForm = () => {

  let arrayOfContacts = _.map(this.state.leadProfile.contactNumber)


  if (_.isEqual(this.state.leadProfile.contactNumber.length, 0) || _.isEqual(this.state.leadProfile.contactNumber.length, 1)) {

    return (
      ...
    )
  } else if (_.isEqual(this.state.leadProfile.contactNumber.length, 2)) {

    return (
     ....
    )
  } else if (_.isEqual(this.state.leadProfile.contactNumber.length, 3)) {
    return (
      <View>
        <Form>
          <Item floatingLabel style={{ paddingLeft: 4 }}>
            <Label style={{ fontSize: 15, color: '#a0a0a0', paddingLeft: 4 }}>
              {arrayOfContacts[0].lead_contact_number_type.lead_contact_number_type}
            </Label>
            <Input
              autoCapitalize="number"
              underlineColorAndroid='transparent'
              onChangeText={(text) => 
              this.setState({
                ...this.state,
                leadProfile: {
                  ...this.state.leadProfile.contactNumber[0],
                  lead_contact_number: text
                },
                contactNumber1: text
              })}
              value={this.state.leadProfile.contactNumber[0].lead_contact_number} />
          </Item>
        </Form>


        <Form>
          <Item floatingLabel style={{ paddingLeft: 4 }}>
            <Label style={{ fontSize: 15, color: '#a0a0a0', paddingLeft: 4 }}>
              {arrayOfContacts[1].lead_contact_number_type.lead_contact_number_type}
            </Label>
            <Input
              autoCapitalize="number"
              underlineColorAndroid='transparent'
              onChangeText={(text) => this.setState({
                ...this.state,
                leadProfile: {
                  ...this.state.leadProfile.contactNumber[1],
                  lead_contact_number: text
                },
                contactNumber2: text
              })}
              value={this.state.leadProfile.contactNumber[1].lead_contact_number} />
          </Item>
        </Form>

        <Form>
          <Item floatingLabel style={{ paddingLeft: 4 }}>
            <Label style={{ fontSize: 15, color: '#a0a0a0', paddingLeft: 4 }}>
              {arrayOfContacts[2].lead_contact_number_type.lead_contact_number_type}
            </Label>
            <Input
              autoCapitalize="number"
              underlineColorAndroid='transparent'
              onChangeText={(text) => this.setState({
                ...this.state,
                leadProfile: {
                  ...this.state.leadProfile.contactNumber[2],
                  lead_contact_number: text
                },
                contactNumber3: text
              })}
              value={this.state.leadProfile.contactNumber[2].lead_contact_number} />
          </Item>
        </Form>
      </View>
    )
  } else if (_.isEqual(this.state.leadProfile.contactNumber.length, 4)) {
    return (
     ...
    )
  } 

}

_.isEqual(this.state.leadProfile.contactNumber.length, 3)上的数据为真当我尝试编辑文本字段时，数据已更改并恢复为默认数字。

Answer 1

要浓缩的标记很多。让我向您展示一种更简单的方法来呈现表单并更新相应的值。请参阅此沙箱以进行操作：https://codesandbox.io/s/boring-hill-i3prc

class NumberForm extends Component {
  constructor(props) {
    super(props);

    this.state = {
      leadProfile: {
        contactNumber: [
          {
            lead_contact_number: "0912 312 412312",
            lead_contact_number_type: {
              lead_contact_number_type: "Mobile"
            }
          },
          {
            lead_contact_number: "1231234rqdasd",
            lead_contact_number_type: {
              lead_contact_number_type: "Mobile"
            }
          },
          {
            lead_contact_number: "0325 658 58996",
            lead_contact_number_type: {
              lead_contact_number_type: "Mobile"
            }
          }
        ]
      }
    };
  }

  handleChange = (e, numberIndex) => {
    const { contactNumber } = this.state.leadProfile;

    const updatedNumbers = contactNumber.map((number, index) => {
      if (index === numberIndex) {
        return {
          ...number,
          lead_contact_number: e.target.value
        };
      } else {
        return {
          ...number
        };
      }
    });

    this.setState({
      leadProfile: {
        ...this.state.leadProfile,
        contactNumber: updatedNumbers
      }
    });
  };

  createForm = () => {
    const { contactNumber } = this.state.leadProfile;

    return contactNumber.map((number, numberIndex) => {
      return (
        <div>
          <input
            value={number.lead_contact_number}
            onChange={e => this.handleChange(e, numberIndex)}
          />
          <label>
            {number.lead_contact_number_type.lead_contact_number_type}
          </label>
        </div>
      );
    });
  };

  render() {
    return <div>{this.createForm()}</div>;
  }
}

高分：

我们将使用接触数组来像您一样创建输入原来。但是我们将使用index提供的.map()值作为好吧。
我们定义了一个事件处理函数来更新我们的数组状态每当用户输入输入时，它将接受索引作为争论。
在设置输入的过程中，我们为它提供了一个事件监听器，配对使用handleChange()函数将其传递给我们在index
这种结构使我们可以有效地更新每个输入的数字即使状态值是对象数组也是如此。

保持这样的结构，您应该能够从所使用的任何库中自由选择诸如输入和标签之类的标记，并选择组件。

当数据在数组中时更改setState中的值

1 个答案: