我有一个简单的日期输入组件,当更改它的值时我就卡住了。因为它总是打印值“1970-01-01”。
有人知道该怎么做。将不胜感激。
这是我的代码:
import React, { useState } from 'react';
import moment from 'moment';
const DateInput = ({ className = style.defaultSize, onChange }) => {
const [value, setValue] = useState(moment().format('YYYY-MM-DD'));
const onChangeDate = (date) => {
const newDate = moment(date.timeStamp).format('YYYY-MM-DD');
setValue(newDate);
console.log(newDate); //always log "1970-01-01"
};
return (
<input
type="date"
value={value}
onChange={onChangeDate}
/>
);
};
export default DateInput;
Run Code Online (Sandbox Code Playgroud) 题主的问题可能不太好理解。希望您能理解我下面的详细信息。
我下面有句子数据,其中有一些标签,由 表示[tn]tag[/tn]:
const sentence = `[t1]Sometimes[/t1] that's [t2]just the way[/t2] it has to be. Sure, there
were [t3]probably[/t3] other options, but he didn't let them [t4]enter his mind[/t4]. It
was done and that was that. It was just the way [t5]it[/t5] had to be.`
Run Code Online (Sandbox Code Playgroud)
我有这句话的一部分。
const parts = [
"Sometimes that's just the way",
"it has to be",
"Sure,",
"there were probably other options,",
"but he didn't let them enter his mind.",
"It was done and that …Run Code Online (Sandbox Code Playgroud) 我们如何通过索引查找并用字符串替换它?(参见下面的预期产出)
我尝试了下面的代码,但它也替换了下一个字符串。(来自这些堆栈)
String.prototype.replaceAt = function(index, replacement) {
return this.substr(0, index) + replacement + this.substr(index + replacement.length);
}
var hello = "hello world";
console.log(hello.replaceAt(2, "!!")); // He!!o World
Run Code Online (Sandbox Code Playgroud)
预期输出:
var toReplace = "!!";
1. "Hello World" ==> .replaceAt(5, toReplace) ===> "Hello!!World"
2. "Hello World" ==> .replaceAt(2, toReplace) ===> "He!!lo World"
Run Code Online (Sandbox Code Playgroud)
注意: toReplace变量可以是动态的。
我有两个组件,父组件和子组件。目前我有下面这些代码。但不幸的是它返回一个错误:
类型错误:无法读取 null 的属性“单击”
由于某些原因,我希望当单击按钮时,项目组件也将被单击。但是下面的这些代码会产生上面的错误。有人知道如何实现它吗?从 'react' 导入 React, { useRef };
const App = (props) => {
const itemRef = useRef(null);
return (
<div>
{dynamicBoolean ? (
<button onClick={() => itemRef.current.click()}>
click item
</button>
) : (
//more codes here
<Item ref={itemRef} />
)}
</div>
);
};
export default App;
Run Code Online (Sandbox Code Playgroud)
子组件如下所示(出于演示目的,代码很长)
import React from 'react';
const Item = (props) => {
return (
<div>
//some design here
</div>
);
};
export default Item;
Run Code Online (Sandbox Code Playgroud) 我的后端代码如下,当我使用Laravel 的blade测试它时,它运行良好。但我无法在 React 前端中使用 Axios 执行相同的操作(请参阅下面的前端代码)。
return (new NewsExport())->download($filename);
Run Code Online (Sandbox Code Playgroud)
我以某种方式从另一个站点找到了一些解决方案:他们更改了后端代码,他们使用该Storage方法返回链接而不是文件。但我不想使用Storage,我想防止过度存储文件(以防前端用户快速单击下载按钮)。
我的问题是如何在前端axios中下载后端返回的文件?
我的前端代码(下面的代码成功下载了一个excel文件,但我认为该文件已损坏,因为当我使用Microsoft Excel测试它时无法打开它)
let response = await newsApi.exportNewsList(payload).then(response => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'exc.xlsx'); //or any other extension
document.body.appendChild(link);
link.click();
});
Run Code Online (Sandbox Code Playgroud)
这是response.data我登录时的截图: