小编DJ2*_*DJ2的帖子

Dropwizard 版本 1.3.0-rc6

大多数有关提供静态内容的文档都是针对旧版本的，甚至Dropwizard 手册中的更新文档也是如此中更新的文档也不完全适合我。

我想提供一个静态 html 文件。我已经修改了提供这些资产的结构/路径，但无法在我的环境中完全获得正确的配置。

静态内容位于以下结构下

src/main/\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 java\n\xe2\x94\x82\xc2\xa0\xc2\xa0\xe2\x94\x94\xe2\ x94\x80\xe2\x94\x80 组织\n\xe2\x94\x82\xc2\xa0\xc2\xa0\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 com\n\xe2\ x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 查询\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \n\xe2 \x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 其余\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\ x94\x82\xc2\xa0\xc2\xa0\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 API\n\xe2\x94\x82\xc2\xa0\xc2\xa0\xe2\x94 \x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 cli\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\ x82\xc2\xa0\xc2\xa0\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80核心\n\xe2\x94\x82\xc2\xa0\xc2\xa0\xe2\x94\x82 \xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 db\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\ xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 运行状况\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2 \xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 资源\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\ xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 任务\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0 \xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 视图\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \n\xe2\x94\x9c\xe2\ x94\x80\xe2\x94\x80 资源\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 META-INF\n\ xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 bin 许可证通知\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94 \xe2\x94\x80\xe2\x94\x80 许可证\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\ xe2\x94\x80\xe2\x94\x80 服务\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 其余\n\ xe2\x94\x82\xc2\xa0\xc2\xa0\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80ftl\n\xe2\x94\x82\xc2\xa0\xc2\xa0\xe2 \x94\x94\xe2\x94\x80\xe2\x94\x80 胡子\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 webapp\n …

我有一个小数据表，由页面加载时的 api 调用预先填充。表中的每一行都有一个设施名称和一个Enabled来自 api 调用的值。如果Enabled== true，则复选框显示为已选中。

我有几个复选框是灰色的，因为它根本无法更改，因此该字段上有一个 readOnly 属性。

关于我的问题，为简洁起见，我浓缩了表中显示的设施列表，但实际上可能有X很多设施。在我的onSubmit函数中，我只想发送设施名称和enabled值（如果它们已被选择/取消选择），而不是在每次按下提交时发送整个列表。

理想情况下，我希望发送的数据的形状如下所示：

{
    facilityName: "Backup Restore",
    enabled: true
}

现在，我已经能够仅隔离facilityName和enabled值，但我无法弄清楚只包含表单中已更改的值。就像我上面说的那样，并不是每次按下提交时都应该发送每一个设施名称和启用的键/值，只是那些已更改的。

这是我目前在我的 onSubmit 函数中拥有的（并且可以在下面的沙箱中看到）

         <Formik
          enableReinitialize
          initialValues={{
            facilities: loggingFacilities
          }}
          onSubmit={async (values, { setSubmitting }) => {

            alert(JSON.stringify(values, null, 2));
            try {

              setLoggingFacilities(values.facilities);
              const valuesToSend = values.facilities.map(facility => {
                return {
                  key: facility.facilityName,
                  value: facility.enabled
                };
              });
              .....

我这里有一个代码箱

**编辑：请检查更新的沙箱，它包含了以下答案中建议的一些更改。**

我正在使用 Formik 及其<FieldArray ../>组件来处理一些嵌套数据以呈现输入。我无法弄清楚要传递给 .name 属性的确切字符串<FieldArray name={ // here}。

在我的组件中，我有一个用户选择，它过滤掉一些数据并返回这个数组。

"chosenDevice": [
  {
    "deviceName": "eth0",
    "macAddress": "01:40:27:0F:2E:CB",
    "ipv4DHCP": false,
    "ipv4Addresses": [
      "182.148.1.100/24"
    ],
    "ipv4Gateway": "",
    "ipv6DHCP": false,
    "ipv6Addresses": [
      "232.232.2/100/10"
    ],
    "ipv6Gateway": ""
  }
]

我想访问ipv4Addresses数组。我要么将错误的字符串传递给，name要么没有.map正确使用索引。目前我有以下几点：

    <FieldArray
  name={`chosenDevice.ipv4Addresses[${index}]`}
>
  {({ remove, push }) => (
    <>
      <div>
        {values.chosenDevice.length > 0 &&
          values.chosenDevice.map(
            (ipv4Addresses, index) => (
              <div
                style={{
                  display: "flex"
                }}
                key={index}
              >
                <label
                  htmlFor={`chosenDevice[${index}].ipv4Addresses`}
                  className="custom-label"
                  style={{ …

我正在尝试实现文件上传，但是使用SUIR <Input>，按钮，标签等。

严格来说，这与渲染中元素的使用有关。

使用常规html <label>和<input>元素，此过程将按预期工作。

  <Form.Field>
    <label>File input & upload for dataschemas & datasources</label>
    <input type="file" onChange={this.fileChange} />
    <Button type="submit">Upload</Button>
  </Form.Field>

现在，我尝试使用SUIR <Input>元素以及带有该<Button>元素的一些道具来进行样式化。

  <Form.Field>
    <label>File input & upload </label>
    <Input type="file" onChange={this.fileChange}>
      <Button
        content="Choose File"
        labelPosition="left"
        icon="file"
      />
    </Input>
    <Button type="submit">Upload</Button>
  </Form.Field>

您可以访问此处的codeandbox ，以更好地了解我在说什么。

当我单击Choose FileSUIR实现示例时，它不会提示用户从其系统中选择文件，而常规html <input>会提示。我不确定如何获得<Input type="file ...>语义上相同的行为。

我正在尝试在我的反应应用程序内的页面组件之一中设置锚点导航。

我试图模仿在 Draft.js 上看到的相同功能，它使用子标题作为锚点（旁边有链接图标），这也反映在 URL 中。

作为参考，我正在查看http://www.tagindex.net/html/link/a_name.html

所以我继续尝试使用该name属性来实现

  <List.Item>\n    <a href="#createqueryschema">Create Query Schema</a>\n  </List.Item>\n

然后是它应该跳转到的副标题

<Header>\n  <a name="createqueryschema">Create Query Schema</a>\n  <Header.Subheader style={{ marginTop: "20px", fontSize: "1rem" }}>\n    BLAH BLAH BLAH BLAH BLAH BLAH\n  </Header.Subheader>\n</Header>\n

我正在名为 的页面上呈现此列表和子标题/overview，因此理论上，当我单击列表中的项目时，它应该跳转到子Create Query Schema标题并反映/overview#createqueryschema在 URL 中。

但是，它正在尝试导航到 page /createqueryschema。我不确定为什么/如何尝试导航到新页面，而它应该只是附加 # 和属性name。

编辑：它也没有跳转到所需的元素

我有一个codesandbox设置来进一步解释。单击菜单栏顶部的文档，这将带您进入带有锚点导航的页面。Overview如果您单击该部分下的两个锚点中的任何一个，则<Header>不会滚动到相应的锚点。

编辑：更新以更好地解释路由问题 …

我正在表中显示用户列表。每行都有一个单元格，其中包含一个用于删除用户的按钮。单击删除按钮时，我将渲染一个 Material-UI<Dialog />组件以进行确认。

问题是地图导致渲染 3 个对话框，最后一个对话框位于顶部。因此，如果数组中有 3 个用户，则会呈现 3 个对话框，但您只能与第 3 个对话框交互（它会阻止其他 2 个对话框出现）。

这个问题与this 类似。

有没有办法控制打开哪个对话框？

handleDeleteUser是一个发出请求的异步函数，因此我需要将id和传递links给该方法。

我这里有一个简化的codesandbox 。如果您尝试删除用户 1 或用户 2，您可以看到控制台中仅显示用户 3 的 ID 和链接。

const handleDeleteUser = (id, links) => {
  // this always prints the id and links for the last user in the table
  console.log("deleting user -->", id);
  console.log("user delete URL", links.self);
  setOpen(false);
};

<Table.Body>
  {userList && userList.length >= 1 ? (
    userList.map(
      ({ id, …

我正在尝试将UTC字符串日期转换为本地时间，因此采用了更具可读性的格式。textView我的活动布局中有一个：

<TextView
    android:id="@+id/dateTv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/titleTv"
    tools:text="Published Date" />

在我的活动中：

class FullArticleActivity : AppCompatActivity() {

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_full_article)

    val articleJson = intent.getStringExtra(ARTICLE_KEY)


    if(!articleJson.isNullOrBlank()) {
      val article = Gson().fromJson<Article>(articleJson, Article::class.java)

        val formatter = SimpleDateFormat("yyyy-MM-dd HH:mm:ssZ", Locale.getDefault())
        formatter.timeZone = TimeZone.getTimeZone("UTC")
        val formattedDate = formatter.parse(article.publishedAt)

      titleTv.text = article.title
      //UTC string
      dateTv.text = article.publishedAt
      contentTv.text = article.content

该publishedAt字符串是从API调用此格式"2018-12-10T19:48:39Z"。如何将ZULU时间格式转换为本地时间？

我正在将使用SUIR制作的一些表单移植到Formik实现中。我有需要自定义更改处理程序来执行操作的输入组件。如何将我的更改处理程序传递给onChange道具，以便 formik 跟踪这些值？

我试过这样的事情，但没有运气。

onChange={e => setFieldValue(dataSchemaName, e)}

这是在这里的另一篇文章中提到的。

这里也提到了它，但我无法让我的自定义更改处理程序与 Formik 很好地连接起来。

我的更改处理程序看起来像这样

handleSchemaChange = (e, { value }) => {
  this.setState({ dataSchemaName: value }, () => {
     console.log("Chosen dataSchema ---> ", this.state.dataSchemaName);
     //also send a request the selfUri of the selected dataSchema
  });
  const schema = this.state.dataschemas.find(schema => schema.name === value);
if (schema) {
  axios
    .get(schema.selfUri)
    .then(response => {
      console.log(response);
      this.setState({
        fields: response.data.data.fields,
      });
      console.log(this.state.fields);
    })
    .catch(error => …

我正在映射一组对象并在下拉选择中使用该名称 w/ semantic-ui-react。

我有一些模拟数据

mock.onGet("/dataschemas").reply(200, {
  data: [
    {
      id: "2147483599",
      selfUri: "/dataschemas/2147483599",
      name: "Book Catalog"
    },
    {
      id: "2147483600",
      selfUri: "/dataschemas/2147483600",
      name: "Business Articles"
    }
  ]
});

在 cDM 中，我将对象的状态更新为 dataschemas

  async componentDidMount() {
    await this.getSchemas();
  }

  getSchemas = async () => {
    try {
      const { data } = await axios.get("/dataschemas");
      console.log(data);
      const dataschemas = data.data;

      this.setState({ dataschemas: dataschemas });

      console.log("This is the dataschema list:", dataschemas);
    } catch (error) {
      console.error(Error(`Error fetching results list: ${error.message}`));
    }
  }; …