Question

对我来说，这项任务很难。请不要生气。我正在进行动态输入以使用户能够添加更多信息。如果两个字段均已填充，则为预期输出，将其推送到数组中。我有一个数据列表和一个输入。对于它们两者，我都想使用一个onChange函数进行验证并将其推送到数组。现在，在onChange函数中，我正在检查数据列表，是否键入了值或从选项中选择了值。问题是当我以状态存储时，它仅保存一个sigle值或不推送到数组。我评论了代码中的问题所在。我试图复制我的代码：https://jsfiddle.net/armakarma/qwg3j2fa/9/

{this.state.arrayOfInput.map((item, idx) => {
  return (
    <>
    <input
      type="text"
      name="address"
      list="data-list"
      onChange={e => this.onChooseAddress(e)}
    />
      <datalist id="data-list">
        {this.state.adresses.map((item, idx) => {
          const { id, address } = item
          return <option key={idx} data-value={id} value={address} />
        })}
      </datalist>
    <input
      name="contact"
      className="event_time-inputs event_table_textarea"
      placeholder="Contact"
      onChange={e => this.onChooseAddress(e)}
    />
    </>
)
})}

onChange函数：

  onChooseAddress(e) {
    const { adresses } = this.state
    let address_id = ""
    let new_address = ""
    let whoIsMetting = ""
    // checking if value from "contact" input
    if (e.target.name === "contact") {
      whoIsMetting = e.target.value
    }
    // checking if value is selected from options in datalist
    for (let i = 0; i < adresses.length; i++) {
      if (
        e.target.value === adresses[i].address &&
        e.target.name === "address"
      ) {
        address_id = adresses[i].id
      }
    }
    //if user typed value
    if (!address_id && e.target.name === "address") {
      new_address = e.target.value
    }

    // PROBLEM IS HERE!!!! if both fields was filled pushing to array
    if ((address_id || new_address) && whoIsMetting) {

      let interviewDetails = {
        address_id: address_id,
        new_address: new_address,
        whoIsMetting: whoIsMetting,
      }

      this.setState(prevState => ({
        arrayOfAddresses: [...prevState.arrayOfAddresses, interviewDetails],
      }))
    }
  }

Answer 1

您的问题是，三个变量address_id，new_address和whoIsMetting中只有一个在调用onChooseAddress时可以有一个值。

您永远不能在whoisMetting中拥有一个值，而在其他任何一个中都不会有值，因为whoIsMetting仅在从onChooseAddress输入中调用contact并获得{如果是从address输入中调用的话。

我建议您要么将部分正确的值存储在另一个变量中（在c方法的外部），然后在将其推送到arrayOfAddresses之前检查是否完成，或者直接将部分正确的条目直接推送到arrayOfAddresses，然后在使用此数组的条目之前，请检查是否完成。

处理多个输入

1 个答案: