javascript - 如何将对象数组从输入框传递到 JavaScript 中的单独数组中

Question

我正在开发一个 react 项目，其中有一个文本输入，它将多次获取输入值。屏幕如下所示:

点击“下一步”后，该值将在下一页中提交，我们可以返回到下面截图所示页面的文本框中输入更多值。对于我在 中输入的每个值，都会有一个相应的单选按钮值。因此，我在 state 中创建了一个数组，其中包含文本框的值。

this.state = { 
    buildingNames: [],
    selectedOptions: ''
}

selectedOptions 状态采用单选按钮值。因此，目前每当在文本框中添加新值时，我都会将其推送到buildingNames状态。但是我无法了解如何获取每个buildingName对应的radioButton值并将其作为对象数组推送。 目前，我将文本框的值插入数组，如下所示:

const tempState = [...this.state.buildingNames];
tempState.push(inputData.value);
this.setState({buildingNames: tempState });

其中 inputData.value 是在文本框中输入的值。

所以我的最终数组应该是这样的:

buildingDetails:[
  {
    buildingName:'abc'
    radioButtonValue:'1'
  },
  {
    buildingName:'def'
    radioButtonValue:'2'
  },
  {
    buildingName:'ghi'
    radioButtonValue:'3'
  },
  // so on
] 

我无法理解如何获取相应建筑物的单选按钮的值。那么，我该如何继续。有人可以指导我吗？

Answer 1

方法 1

您可以制作buildingDetails一个对象(将具有 buildingName 和 radioButtonValue 键)，并添加另一个状态 pageNo 。 pageNo可以作为索引保存buildingDetails中的数据。所以buildingDetails[0].buildingName将存储输入值 buildingName第一页的。依此类推。

这是一个例子，我在必要的地方添加了注释:

class Reservation extends React.Component {
  numberOfPages = 10 // total number of pages

  constructor(props) {
    super(props)
    this.state = {
      pageNo: 0, // which page we are currently on, 0 based
      buildingDetails: {}, // this is an object which should be indexed with `pageNo`
    }
  }

  handleInputChange = event => {
    const target = event.target
    const value = target.type === 'checkbox' ? target.checked : target.value
    const name = target.name

    // save the data to the corresponding `pageNo` index of buildingDetails
    this.setState(prevState => ({
      buildingDetails: {
        ...prevState.buildingDetails,
        [prevState.pageNo]: {
          ...prevState.buildingDetails[prevState.pageNo],
          [name]: value,
        },
      },
    }))
  }

  handlePrevClick = e => {
    // TODO: implement your own logic so that it never goes past page 0
    e.preventDefault()
    this.setState(prevState => ({
      pageNo: prevState.pageNo - 1,
    }))
  }
  handleNextClick = e => {
    // TODO: implement your own logic so that it never goes beyond last page
    e.preventDefault()
    this.setState(prevState => ({
      pageNo: prevState.pageNo + 1,
    }))
  }

  render() {
    return (
      <form>
        <label>
          Building Name:
          <input
            name="buildingName"
            value={
              this.state.buildingDetails[this.state.pageNo]
                ? this.state.buildingDetails[this.state.pageNo].buildingName
                : ''
            }
            onChange={this.handleInputChange}
          />
        </label>
        <br />
        <div>
          Dummy Gender:
          <input
            type="radio"
            name="radioButtonValue"
            value="male"
            checked={
              this.state.buildingDetails[this.state.pageNo]
                ? this.state.buildingDetails[this.state.pageNo]
                    .radioButtonValue === 'male'
                : false
            }
            onChange={this.handleInputChange}
          />{' '}
          Male
          <input
            type="radio"
            name="radioButtonValue"
            value="female"
            checked={
              this.state.buildingDetails[this.state.pageNo]
                ? this.state.buildingDetails[this.state.pageNo]
                    .radioButtonValue === 'female'
                : false
            }
            onChange={this.handleInputChange}
          />{' '}
          Female
          <br />
        </div>

        <button onClick={this.handlePrevClick}>Prev</button>
        <button onClick={this.handleNextClick}>Next</button>
        <br />
        <code>{JSON.stringify(this.state)}</code>
      </form>
    )
  }
}

function App() {
  return (
    <div className="App">
      <Reservation />
    </div>
  )
}

const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

方法2

buildDetails将是一个数组，并且您最初用占位符对象填充它。使用pageNo索引数组，几乎与以前相同的方法。在这里，您将把当前数组映射到一个新数组，但修改索引为 pageNo 的对象。 :

class Reservation extends React.Component {
  numberOfPages = 10; // total number of pages

  constructor(props) {
    super(props);
    this.state = {
      pageNo: 0, // which page we are currently on, 0 based
      buildingDetails: new Array(this.numberOfPages).fill({
        buildingName: "",
        radioButtonValue: ""
      }) // this is an array which should be indexed with `pageNo`
    };
  }

  handleInputChange = event => {
    const target = event.target;
    const value = target.type === "checkbox" ? target.checked : target.value;
    const name = target.name;

    // save the data to the corresponding `pageNo` index of buildingDetails
    this.setState(prevState => ({
      buildingDetails: prevState.buildingDetails.map((detail, index) => {
        if (index !== prevState.pageNo) {
          // This isn't the item we care about - keep it as-is
          return detail;
        }

        // Otherwise, this is the one we want - return an updated value
        return {
          ...detail,
          [name]: value
        };
      })
    }));
  };

  handlePrevClick = e => {
    // TODO: implement your own logic so that it never goes past page 0
    e.preventDefault();
    if (this.state.pageNo === 0) return;
    this.setState(prevState => ({
      pageNo: prevState.pageNo - 1
    }));
  };
  handleNextClick = e => {
    // TODO: implement your own logic so that it never goes beyond last page
    e.preventDefault();
    if (this.state.pageNo === this.numberOfPages - 1) return;
    this.setState(prevState => ({
      pageNo: prevState.pageNo + 1
    }));
  };

  render() {
    return (
      <form>
        <label>
          Building Name:
          <input
            name="buildingName"
            value={this.state.buildingDetails[this.state.pageNo].buildingName}
            onChange={this.handleInputChange}
          />
        </label>
        <br />
        <div>
          Dummy Gender:
          <input
            type="radio"
            name="radioButtonValue"
            value="male"
            checked={
              this.state.buildingDetails[this.state.pageNo].radioButtonValue ===
              "male"
            }
            onChange={this.handleInputChange}
          />{" "}
          Male
          <input
            type="radio"
            name="radioButtonValue"
            value="female"
            checked={
              this.state.buildingDetails[this.state.pageNo].radioButtonValue ===
              "female"
            }
            onChange={this.handleInputChange}
          />{" "}
          Female
          <br />
        </div>

        <button onClick={this.handlePrevClick}>Prev</button>
        <button onClick={this.handleNextClick}>Next</button>
        <br />
        <code>{JSON.stringify(this.state)}</code>
      </form>
    );
  }
}

function App() {
  return (
    <div className="App">
      <Reservation />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

希望有帮助。