使用@bind和 有@bind-value什么区别？

我做了这个简单的例子，并在浏览器中测试，我没有看到任何区别。

<p>@@bind @increment1</p>

<input 
    type="text"
    @bind="@increment1"
/>

<p>@@bind-value @increment2</p>
<input 
    type="text"
    @bind-value="@increment2"
/>

@code {
    string increment1;
    string increment2;
}

我正在使用Grid.Blazor库在 Blazor 应用程序上渲染服务器端网格。其中一列有一个带有单击事件的按钮。因此，当单击按钮时，网格行事件也会与按钮单击事件一起触发。我想停止事件传播并只让按钮单击事件触发。

网格：

  <GridComponent @ref="_gridComponent" T="QuickLists" Grid="@_grid"  OnRowClicked="@(async (item) => await ExerciseDetails(item))"></GridComponent>


Action<IGridColumnCollection<QuickExcerciseLists>> columns = c =>
        {
            c.Add().Titled("Actions").RenderComponentAs(typeof(ChildComponent)).SetWidth("5%");
            c.Add(o => o.Name, comparer).Titled("Name").SetWidth("10%");
            c.Add(o => o.Age, comparer).Titled("Age").SetWidth("15%");
            c.Add(o => o.Address, comparer).Titled("Address").RenderComponentAs<MatTooltip>().SetWidth("15%");
        };

自定义列组件：

<MatBlazor.MatButton Icon="@MatIconNames.Remove_red_eye" @onclick="@ShowData" @onclick:stopPropagation="true"></MatBlazor.MatButton>

我尝试传递@onclick:stopPropagation子按钮组件。但下面给出了编译错误。

该组件的组件参数“onclick”使用两次或多次。参数必须是唯一的（不区分大小写）。组件参数“onclick”由“@onclick:stopPropagation”指令属性生成。

我正在运行.Net core 3.1.201。非常感谢任何帮助。

我正在使用 Material-UI，但我有点困惑。有组件，Typography但我无法真正理解何时使用它以及它的目的是什么。

应该Typography什么时候使用？它解决/帮助什么问题，或者如果我在开发时使用它会有什么好处？

一个例子对我更好地理解它非常有用。

将useState的初始值用作函数的情况是什么？
和仅仅传递一个值有什么区别吗？

例如

const [state, setState] = useState(() => someValue)

我想要做的是当用户按下一个键时更新变量值，但它只更新输入模糊时的值。

以下代码不起作用。

<p>@increment</p>
<input 
    type="text"
    @onchange="@((ChangeEventArgs e) =>
        increment = e.Value.ToString())"
/>

@code {
    string increment;
}

使用@bind和@bind-value也不起作用。

我用这个例子做了一个blazorfiddle。

当按下 a 键时，谁能改变我的变量的值？

我正在尝试安装程序对新安装程序做出反应，但这给了我以下错误

./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/index.css)
Error: Cannot find module '@csstools/normalize.css'

谁能建议我前进

提前致谢

为什么不能将 ref 传递给 React 中的功能组件？

与无法向其传递引用的类组件相比，函数组件有何不同？

为什么那不可能呢？

注意：我提出这个问题是因为我总是看到有关如何将 ref 与功能组件一起使用的解释，并且您需要使用fowardRef，但没有人解释 React 如何处理功能组件，从而无法将 ref 传递给它，它总是解释如何去做，但从来没有解释为什么你需要这样做。

我正在获取一个返回 json 的 API，但是当它出现错误时，它只返回一个文本（在带有 express 的节点中，返回结果为.json({})，错误为.send('string')），但是我无法修改 API

所以我试图制作一些读取 json 的东西，但如果它是一个文本，它将进入.catch错误所在的文本。

这是我尝试过但没有成功的方法。

fetch(apiUrl)
    .then(res => {
        try {
            let json = res.json()
            return json
        } catch (error) {
            return new Promise((resolve, reject) => reject(res.text()))
        }
    })
    .then(res => {
        // get result from res.json() **res == res.json**
    })
    .catch(error => {
        // get result from res.text() **res == res.text**
    })

我怎样才能做到这一点？如何获得res.json()在未来.then()，但如果失败，得到res.text()的.catch？

编辑：

我想获得.text在.catch …

我想仅在按下 Enter 时阻止输入（input带有 的 html 标记）的默认行为type="text"

protected void HandleKeyPress(KeyboardEventArgs keyboardEventArgs)
{
    if (keyboardEventArgs.Key == "Enter")
    {
        // prevent default
    }     

    // rest of function  
}

我知道我可以做@on{EVENT}:preventDefault之类的事情，但是如何在事件处理程序内有条件地执行此操作？

在javascript中我可以做类似的事情

function(e){
    if(e.keyCode == 13) {
      e.preventDefault();
    }
    // rest of function
}

如何在 Blazor 中做同样的事情？

编辑：

我正在为库进行输入，但无法更改“提交”按钮，我需要在输入组件中防止这种情况发生。

我正在尝试使用后端对 REST API 的 API 调用产生的数据更新 React 应用程序的上下文。问题是我无法同步该功能。

我已经尝试过这篇博客文章https://medium.com/@__davidflanagan/react-hooks-context-state-and-effects-aa899d8c8014 中建议的这个解决方案，但它不适用于我的情况。

这是 textContext.js 的代码

import React, {useEffect, useState} from "react";
import axios from "axios";

var text = "Test";

fetch(process.env.REACT_APP_TEXT_API)
    .then(res => res.json())
    .then(json => {
      text = json;
    })




const TextContext = React.createContext(text);
export const TextProvider = TextContext.Provider;
export const TextConsumer = TextContext.Consumer;

export default TextContext

这是我尝试从上下文访问数据的功能组件

import TextProvider, {callTextApi} from "../../../../services/textService/textContext";
function  Profile()
{

  const text = useContext(TextProvider);
  console.log(text);
  const useStyles = makeStyles(theme => ({
    margin: {
      margin: …