使用反应钩子将所选项目显示到另一个组件

Question

我有一个包含模板的部分，现在我希望用户选择其中一个模板并编辑模板中的数据，例如姓名、职位、联系方式等。

这是我在代码沙箱中的现场演示editor live demo

这里是templates.js

export default function Templates() {
  const [selected, setSelected] = useState("");
  let history = useHistory();

  const handleSelected = (e) => {
    const value = e.target.innerHTML;
    setSelected(value);
   history.push('/Settings') 
  };


  return (
    <div className="App">
      <h2>Select one of the Template below by clicking title</h2>

    <div className={`template_one ${selected === "Template_one" ? "selected" : "unselected"}`} onClick={(e) => {setSelected(selected !== "Template_one" ? "Template_one" : ""); handleSelected(e);}}>
        <h1>Template_one</h1>
        <table striped bordered hover size="sm">
          <thead>
            <tr>
              <th>#</th>
              <th>Name</th>
              <th>Job</th>
              <th>Facebook</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Mark</td>
              <th>Developer</th>
              <td>facebook/Mark</td>
            </tr>
          </tbody>
        </table>
   
      </div>

      <div className={`template_two  ${selected === "Template_two" ? "selected" : "unselected"}`} onClick={(e) => {setSelected(selected !== "Template_two" ? "Template_two" : "");handleSelected(e);}}>
        <h1>Template_two</h1>

        <table striped bordered hover size="sm">
          <thead>
            <tr>
              <th>#</th>
              <th>Name</th>
              <th>Job</th>
              <th>Company</th>
              <th>Contact </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Trump</td>
              <th>President</th>
              <td>Trump Organization</td>
              <td>+1 728 256 345</td>
            </tr>
          </tbody>
        </table>
       
      </div>
    </div>
  );
}

这里是 settings.js

import React from "react";

export default function Settings() {
  return (
    <div>
      <h1>Settings</h1>
      <div className="Settings">
        <form>
          Name: <input type="text" name="firstname" />
          Job: <input type="text" name="job" /> <br /> 
          Facebook: <input type="text" name="facebook" /> 
          Company: <input type="text" name="company" />  
          Contact: <input type="text" name="contact" /> 
        </form>
        <div className="selected-template">
          Here should be the selected template
        </div>
      </div>
    </div>
  );
}

预期结果：

问题：我不知道如何在设置组件中显示选择的模板。

如何将选定的模板复制到设置组件，以便用户可以编辑选定的模板？

Answer 1

我不知道为什么，但是有人删除了我的其他帖子，这就是我现在看到您的消息的原因。如果要制作不同的样式，可以将类名添加到数据中。另外，如果您愿意，可以查看这个库：https://material-ui.com/styles/basics/ 它在 react 用户中非常受欢迎。您基本上可以使用这个库在 javascript 中制作所有样式。如果你要使用这个库，你可以在你的数据中添加所有的 jss。 这是一个例子：

  const table1= {
  root: {
  background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
  border: 0,
  borderRadius: 3,
  boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
  color: 'white',
  height: 48,
  padding: '0 30px',
  },
 };
Data=[
  {
  name:'something',
  style:table1
  },
  {
  age:22,
  style:table2
  }
]

以及如何使用这些样式的基本解释

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';



function Table() {
  const classes = props.data.style();
  return <Table className={classes.root}>Your table here</Table>;
}

export default withStyles(props.data.style)(Table);