小编Und*_*ned的帖子

我正在制作一个简单的反应应用程序，其中有两个不同的div's..

具有选择输入和选定列表的一个，

  <div id="container">
    <div className="_2iA8p44d0WZ">
      <span className="chip _7ahQImy">Item One</span>
      <span className="chip _7ahQImy">Item Two</span>
      <span className="chip _7ahQImy">Item Three</span>
      <span className="chip _7ahQImy">Item Four</span>
      <span className="chip _7ahQImy">Item Five</span>
      <input
        type="text"
        className="searchBox"
        id="search_input"
        placeholder="Select"
        autoComplete="off"
        value=""
      />
    </div>
  </div>

另一个会将所选选项列出为fieldset，

  <div>
    {selectedElements.map((item, i) => (
      <div key={i} className="selected-element" ref={scrollDiv}>
        <fieldset>
          <legend>{item}</legend>
        </fieldset>
      </div>
    ))}
  </div>

基于这个解决方案，我已添加createRef到所选元素，例如，

<div key={i} className="selected-element" ref={scrollDiv}>
</div>

然后我采用 Javascript 查询方法来获取 DOM 元素，例如，

  const chipsArray = document.querySelectorAll("#container > div > .chip");

向所有元素添加了单击事件侦听器，例如， …

我正在使用 AWS 自定义认知登录 UI。

在我给出的应用程序客户端设置中，

上述输入结果如下：

需求：这里我需要更改登录中的文本。

喜欢。Continue with Google ​ Sign In with Google

我只能看到输入框的边框、填充、边距的变化，但无法找到更改UI Customization下文本的方法。

那么我需要做什么来更改上面给定按钮的文本呢？

我正在使用Tailwind css制作一个简单的反应应用程序。

案例1 ：无顺风的工作场景：

https://codesandbox.io/s/bold-agnesi-y70ue

在此示例中，不包括顺风，它是一个简单的反应应用程序，其中字段集和图例以正确的方式显示，并带有边框。

情况 2：顺风时不工作的情况：

与第一个场景一样，我想使用 Tailwind CSS 实现相同类型的 UI。

我尝试过的事情如下所示，

https://codesandbox.io/s/tailwind-css-and-react-forked-tkolh

问题：根据给定的第二个链接（使用 Tailwind css），字段集周围不显示边框，但显示表单字段和图例文本。

简单代码：

  <form>
    <fieldset>
      <legend>Personalia:</legend>
      <label for="fname">First name:</label>
      <input type="text" id="fname" name="fname" />
      <br />
      <br />
      <label for="lname">Last name:</label>
      <input type="text" id="lname" name="lname" />
      <br />
      <br />
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" />
      <br />
      <br />
      <label for="birthday">Birthday:</label>
      <input type="date" id="birthday" name="birthday" />
      <br />
      <br />
      <input type="submit" value="Submit" />
    </fieldset> …

我正在使用 React 制作一个步进表单。表格结构也差不多完成了..

有两个步骤，

-> Basic Details

-> Employment Details

这里，表单上下文用于填写输入字段的默认值，如果进行任何更改，则将通过状态存储。

表单上下文.js

import React, { useState } from 'react';

export const FormContext = React.createContext();

export function FormProvider({ children }) {
  const [formValue, setFormValue] = useState({
    basicDetails: {
      firstName: 'John',
      lastName: '',
    },
    companyDetails: {
      companyName: 'Some Company',
      designation: 'Some Designation',
    },
  });

  return (
    <FormContext.Provider value={[formValue, setFormValue]}>
      {children}
    </FormContext.Provider>
  );
}

这里我有下一个和上一个按钮可以在步骤之间移动，

索引.js：

  const next = () => setCurrentPage((prev) => prev + 1);
  const prev = () => setCurrentPage((prev) => …

我正在制作一个简单的简历生成应用程序。

索引.js：

import ReactDOM from "react-dom";
import Resume from "../components/resume";
import React, { useRef } from "react";
import { useReactToPrint } from "react-to-print";

const App = () => {
  const componentRef = useRef();
  const handlePrint = useReactToPrint({
    content: () => componentRef.current
  });

  return (
    <div className="bg-gray-200 p-6">
      <button
        type="button"
        className="bg-gray-500 border border-gray-500 p-2 mb-4"
        onClick={handlePrint}
      >
        {" "}
        Print Resume{" "}
      </button>
      <Resume ref={componentRef} />
    </div>
  );
};

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

简历是从components/resume.js文件中生成的，它是一个功能组件.. …