如何使用 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 }) => (

  <div>

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

    <div>{inputs.firstName}</div>

    <div>{inputs.lastname}</div>

  </div>

);

Answer 2

我不确定你想做什么：

在 AddList 中传递输入：

<DisplayList inputs={inputs} />

并将 DisplayList 更改为：

const DisplayList = ({ inputs }) => (

  <div>

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

    <div>{JSON.stringify(inputs)}</div>

  </div>

);

Answer 3

我只是将输入对象作为DisplayList组件的道具，并在p标签中调用firstName和lastName的属性。

<DisplayList inputs={inputs} />

const DisplayList = ({ inputs }) => (

 <div>

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

   <p>First Name:{inputs.firstName}</p>

   <p>Lastname:{inputs.lastName}</p>

 </div>

);