主页 / 问题 / 1553533
Accepted
Caplex
Asked:2023-11-28 13:23:52 +0000 UTC2023-11-28 13:23:52 +0000 UTC

条件运算符不考虑条件变化

  • 772

我有一个 React 组件，表示带有输入（文本、数字、日期）的表单。日期输入有一个默认值 - Today( today)。我将这一组件用于两个功能：创建对象和编辑对象。在第一种情况下，默认情况下所有输入都是空的，除了包含值的日期输入today。在第二种情况下，输入从可选的 props( values) 接收默认值，这些默认值从父组件的状态提供给组件。该组件以两份副本呈现在页面上，一份values已传输，另一份未传输。由于存在values是可选的，因此我在每个输入的默认值中包含了一个条件语句。在日期导入的情况下，它看起来像这样：

defaultValue={inputValues?.date ? inputValues.date : today}

在其他情况下，today会放置一个空字符串''。

我预计当状态发生变化时，组件将被重新渲染并插入到默认输入值中values。实际上，这种情况仅发生在默认为空的输入中，并且带有日期的输入始终具有值today。

通过控制台，我看到组件渲染时，inputValue该值是未定义的（useState它显示为空括号），所以一开始我认为values它在渲染时没有时间出现。但是，当您单击编辑按钮时，values控制台中会显示正确的内容。在我的理解中，此时组件应该values根据表达式重新渲染并替换该值，{inputValues?.date ? inputValues.date : today} 但实际上，日历的值 = today，所有其他输入的值 = values。如果将表达式替换today为空字符串，那么当您调用编辑函数时，编辑表单中的日历值 = inputValues.date，但创建表单中的默认值现在为空，因为 today在这种情况下未指定。

此行为并非日历所独有，任何其他输入的行为方式相同，如果在表达式中，请将空字符串替换为任何值。如果您解释此行为以及如何解决它，我将非常高兴。

测试用例


    import React, { useState } from 'react';
    
    export default function Parent() {
      const [values, setValues] = useState();
      const change = () => setValues({ name: 'name', date: '2023-11-28' });
      return (
        <Child values={values} change={change} />
      );
    }
    
    function Child({ values, change }) {
      console.log(values);
      return (
        <div className="container">
          <button type="button" onClick={change} >clickMe</button>
          <input type="text" defaultValue={values?.name ? values.name : ''} />
          <input type="date" defaultValue={values?.date ? values.date : '2023-11-20'} />
        </div>
      );
    }
javascript

1 个回答

  1. Best Answer

    事实上，defaultValue它的行为很奇怪。

    我在网上查了一下，你不是唯一遇到这个问题的人。结果，他们提供了这个问题的“解决方案”。您需要为“有问题的”输入提供一个属性，key以便它在每次渲染时都会发生变化。那。元素开始响应其状态的变化defaultValue。

    //    
function App() {
  const [values, setValues] = React.useState();
  const change = () => setValues({ name: 'name', date: '2023-11-28' });
  return (
    <Child values={values} change={change} />
  );
}
//
function Child({ values = {}, change }) {
  console.log(values);
  const v1 = values.name ? values.name : ''
  const v2 = values.date ? values.date : '2023-11-20'
  const k = v2 ? v2 : (new Date()).toString()
  return (
    <div className="container">
      <button type="button" onClick={change} >clickMe</button>
      <input type="text" defaultValue={v1} />
      <input key={k} type="date" defaultValue={v2} />
    </div>
  );
}

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<App />);
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<div id="like_button_container"></div>

    • 3

相关问题