标签: react-component

我可以通过从列表中选择值来使用自动完成功能。现在我想在选择中添加一个新值。我尝试了多种选择，包括onChange但无法实施。

如果用户输入内容并在文本框外部单击，则它应该将自由文本转换为标签。此外，允许用户继续从预定义列表/自由文本添加更多标签。

我正在尝试这里的选项，但没有运气。这是否可能，或者我是否需要寻找其他选择？

大家好，我正在尝试根据条件过滤复选框的 onClick 对象数组列表，但句柄方法中的 else 条件返回给我一个状态不会改变的相同数组，所以我想要删除默认列表当我尝试取消选中所有列表上的复选框时，已过滤列表。

import React from "react";
import "./Search.css";

class Search extends React.Component {
  constructor() {
    super();
    this.state = {
      searchLists: [
        {
          id: 1,
          type: "All",
          name: "Akash",
          location: "bangalore",
          experience: 1
        },
        {
          id: 2,
          type: "FullTime",
          name: "feroz",
          location: "mumbai",
          experience: 3
        },
        {
          id: 3,
          type: "PartTime",
          name: "Farheen",
          location: "agra",
          experience: 5
        },
        {
          id: 4,
          type: "Freelancer",
          name: "Raju",
          location: "chennai",
          experience: 6
        },
        {
          id: 5,
          type: "All",
          name: "Asif",
          location: …

由另一个控制器控制的用户窗体在控制台上抱怨为

“警告：组件正在将不受控的输入更改为受控。这可能是由于值从未定义的值更改为已定义的值引起的，这种情况不应该发生。在组件的生命周期内决定使用受控或不受控的输入元素。更多信息： https: //reactjs.org/link/control-components 输入跨度 li ul..."**

这是组件代码：

export default({user}) => {
  if(!user) {
    return <div></div>
  } else {
    const [name,setName] = useState(user.name|| "")
    useEffect(() => {
      setName(user.name);
    }, [user])
              
    return <form>
             <fieldset> 
               <legend> Edit  {user.name }</legend>
               <p> 
                 <label htmlFor={"name"}> Name  </label>
                 <input  id="name" value={name || ""} onChange={e => setName(e.target.value)} />
               </p> 
             </fieldset>
           </form>
  }
}

我尝试了其他 stackoverflow 答案中建议的所有修复，但仍然发出警告。
我可能缺少什么吗？

我正在使用 Next.js 构建一个网站，目前我正在尝试在按键时运行一个简单的函数。我遇到的问题是 onKeyDown 事件没有像我预期的那样被触发。我的代码如下： <main onKeyDown={e => console.log("Key pressed")}>

目前它被放置在“main”元素中，这是该组件的顶部根元素。我也尝试将 onKeyDown 事件放置在许多其他元素中，但没有成功。我不确定是否是位置导致了问题，还是我对如何使用此事件缺乏了解。任何帮助，将不胜感激。

至于现在，我只是希望它在控制台中写入一些内容，以便我可以看到它触发了。我尝试使用 onKeyPress 代替，并为事件分配一个函数而不是 lambda 表达式，这应该没有什么区别。

我想知道是否可以向组件实例添加新的prop,组件实例如下所示:

也许是直接修改组件实例的坏习惯,但我想知道它是否可能.

这些天我正在使用反应组件，并且在使用悬停样式设计我的一个按钮时遇到了一些问题。以下是我在组件中使用的代码片段。

const darkTheme = createMuiTheme({
    palette: {
        type: 'dark',
        secondary:amber
    },
    typography: {
        useNextVariants: true,
    }
});

const lightTheme = createMuiTheme({
    palette: {
        type: 'light',
        secondary:amber
    },
    typography: {
        useNextVariants: true,
    }
});

上面是我正在使用的自定义主题。

class APIWidget extends Widget {

constructor(props) {
    super(props);

    this.styles = {
        button: {
            backgroundColor: amber[500],
            '&:hover': {
                backgroundColor: amber[700],
            },
            position: 'absolute',
            bottom: 20,
            right: 20
        },
    };
}

render() {
    return (
        <MuiThemeProvider theme={this.props.muiTheme.name === 'dark' ? darkTheme : lightTheme}>
                <Button variant="contained" color="secondary" style={this.styles.button}>
                    <ArrowBack …

以前是：

class App extends Components{
  //...
}

现在create-react-app在App.js：

function App(){
  //...
}

有人知道为什么要进行此更改吗？他们是否暗示我们不应该在App中拥有状态？

我刚刚创建了一个包含表达式的函数组件const [state, setState] = useState()。现在我可以访问state和setState()，这个有状态的函数组件与有状态的类组件非常相似。我只知道这个组件和典型的类组件之间有两个区别：在引用状态时，我们必须使用state.handle而不是this.state.handle，并且我们可以轻松访问render方法之外的 Context API 。

除了我已经发现的差异之外，这个有状态的函数组件和有状态的类组件有什么区别吗？我的上述断言不正确吗？

稍微细化一下这个问题，有什么是类组件可以做而带有 Hooks 的函数组件不能做的吗？

我有一个像这样的通用组件

const Img = ({ component }) => {
  const image_ref = useRef()

  return (
  <>
    {component
      ref={image_ref}
    }
  </>
  )
}

我想将它与其他像这样的组件一起使用

const MyImg = () => <Img component={<MySpecificImg />} />
const MyBackImg = () => <Img component={<MySpecificBackImg />} />

有没有办法做到这一点？

需要的是能够改变<Img/>组件调用的组件

我在提交表单后使用 this.props.history.push 将 props 传递给组件。

提交表单会将用户带到主页（/home），但它还需要将 props 传递给 NavBar 组件，该组件不包含在 React-router 路由中。

 this.props.history.push({
    pathname: '/home',
    propOne: propOneValue // <-- this prop must be received by NavBar component 
 })

我尝试做这样的事情：

    ...

    }).then((response) => {
     this.props.history.push({
        pathname: '/home',
     })
    return <NavBar propOne={propOneValue} />

    ...

但this.props.propOne在导航栏（基于类）组件中未定义。我认为这可能是由于导航栏已经在其他组件之一中没有道具的情况下渲染的。

所以我的问题是 - 你可以使用 this.props.history.push 将 props 传递给与路径名路由不同的组件吗？