如何使用 React 将输入值附加到 HTML 元素中

Question

我正在尝试构建一个输入表单，该表单将使用 React 钩子在另一个页面中显示提交的值。我可以在控制台登录时看到这些值，我正在寻找的是如何将它们附加为 HTML 元素。

以下代码是我工作的简化版本。

const DisplayList = ({ inputs }) => (

  <div>

    <h3>page 2 (parent component)</h3>

    <div>{inputs}</div>

  </div>

);

const AddList = () => {

  const onSubmitForm = () => {

    console.log(`

      First name: ${inputs.firstName}

      Last name: ${inputs.lastName}`);

  };

  const { inputs, handleInputChange, handleSubmit } = InputForm(onSubmitForm);

  return (

    <div>

      <h3>page 1 (child component)</h3>

      <form onSubmit={handleSubmit}>

        <label>First Name: </label>

        <input

          type="text"

          name="firstName"

          onChange={handleInputChange}

          value={inputs.firstName || ""}

          required

        />

        <label>Last Name: </label>

        <input

          type="text"

          name="lastName"

          onChange={handleInputChange}

          value={inputs.lastName || ""}

          required

        />

        <button type="submit">Submit</button>

      </form>

      <hr />

      <DisplayList />

    </div>

  );

};

export default AddList;

非常感谢提供的任何帮助和指导！

这是查看完整代码的链接：代码沙箱

Answer 1

将输入作为道具传递给第二页组件，如下所示。DisplayList inputs={inputs} />并在下面的组件中使用它。const DisplayList = ({ inputs }) => (&nbsp; <div>&nbsp; &nbsp; <h3>page 2 (parent component)</h3>&nbsp; &nbsp; <div>{inputs.firstName}</div>&nbsp; &nbsp; <div>{inputs.lastname}</div>&nbsp; </div>);

Answer 2

我不确定你想做什么：在 AddList 中传递输入：<DisplayList inputs={inputs} />并将 DisplayList 更改为：const DisplayList = ({ inputs }) => (&nbsp; <div>&nbsp; &nbsp; <h3>page 2 (parent component)</h3>&nbsp; &nbsp; <div>{JSON.stringify(inputs)}</div>&nbsp; </div>);

Answer 3

我只是将输入对象作为DisplayList组件的道具，并在p标签中调用firstName和lastName的属性。<DisplayList inputs={inputs} />const DisplayList = ({ inputs }) => (&nbsp;<div>&nbsp; &nbsp;<h3>page 2 (parent component)</h3>&nbsp; &nbsp;<p>First Name:{inputs.firstName}</p>&nbsp; &nbsp;<p>Lastname:{inputs.lastName}</p>&nbsp;</div>);