小编Den*_*ash的帖子

我一直在使用模态组件，我注意到模态窗口中的长内容使整个模态主体滚动，而不仅仅是模态内的内容。

有没有办法让内容单独滚动，同时保持 Modal 组件的页眉和页脚固定？

我需要类似于 Material-UI Dialog 组件的 Paper 滚动工作原理的东西。

检查标有 的按钮 scroll=Paper。

Ant Design 库通过使用getFieldDecorator提供表单验证。文档没有提供如何在无状态组件中使用它的示例，我无法找到一种方法来做到这一点。

有没有办法实现这一目标？

我在 redux hooks 中设置了状态，我不知道如何导入或使用选择器我想要的状态

这里我使用 useSelector Send to state in Login 文件

function Login(props) {

var classes = useStyles();
var dispatch = useDispatch();

const { username, password } = useSelector((state) => ({
    ...state.combineReducers,
    ...state.userReducer,
}));

那是导航文件 在这里我想获取该州的内容

function nav(props) {

    const { username } = useSelector((state) => ({
        ...state.combineReducers,
        ...state.userReducer,
    }));

错误

 Failed to compile.

./src/NAVBAR/nav.js
  Line 27:  React Hook "useSelector" is called in function "nav" which is neither a React function component or a custom React Hook …

createAsyncThunk从存储在集合中的 Google Firebase 获取笔记数据时，我使用Redux Toolkit 中的 APInotes

在notebookSlice.js我定义了函数 thunk 和 slice

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
const firebase = require('firebase');

export const fetchNotes = createAsyncThunk(
  'users/fetchNotes',
  async () => {

    firebase.firestore().collection('notes').get()
      .then((snapshot) => {
        var data = [];
        snapshot.forEach((doc) => {
          data.push({
            title: doc.data().title,
            body: doc.data().body,
            id: doc.id
          })
        });


        console.log(data); // not null
        return data;
      })
      .catch((err) => {
        console.log(err)
      });



  }
)


export const notebookSlice = createSlice({
  name: 'notebook',
  initialState: {
    selectedNoteIndex: …

语境：

• 添加新消息（例如，每两秒一次，使用 setInterval）。
• 消息有状态，可以是旧的，也可以是新的。新添加的消息有一个“新”标志。
• 每 5 秒后，所有“新”消息都会被指定为“旧”消息。（设置超时）

问题：

• 直到结束才触发超时。添加新消息，但在添加所有消息之前它们仍保持“新”状态。
• 我怀疑每次更新后超时都会被重置/清除，并且因为更新发生的速度比超时快，所以超时回调永远不会及时触发（因此只有最终的超时被触发）。

function useInterval(callback, delay) {
  const savedCallback = React.useRef();
  // Remember the latest callback.
  React.useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);
  // Set up the interval.
  React.useEffect(() => {
    function tick() {
      savedCallback.current();
    }
    if (delay !== null) {
      let id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}

const defaultMessages = [
  {
    message: "message 1",
    new: false
  },
  {
    message: "message 2",
    new: …

I am trying to use the setState react hook and I am trying to make an object of states for different states like this

const [myState, setMyState] = useState({bulb1state: true, bulb2state: true})

then i try to change the states by doing:

setMyState({...myState, bulb1state: false})
//My state is now {bulb1state: false, bulb2state: true } 

which is normal and expected, but when i try to set the other state of the object by doing

setMyState({...myState, bulb2state: false})
//My state now becomes {bulb1state: …

我正在使用 ant design 中的通知组件，我想从通知框中删除关闭 (X) 按钮。

我尝试过添加closable: false但icon: null不起作用

notification.info({
    description: "Sample description",
    closable: false,
    icon: null 
})

我正在使用蚂蚁设计表并getColumnSearchProps用于column-driven搜索。我想search input在列的标题中有 。但是我不知道如何处理此列的搜索和输入？

数据：

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Joe Black',
    age: 42,
    address: 'London No. 1 Lake Park',
  }]

这是我的专栏：

const columns = [
    {
        title: (
            <>
                <Search
                    placeholder="search"
                    prefix={<CPIcon type="search" />}
                    onChange={??????????????}
                />
                name
            </>
        ),
        dataIndex: 'name',
        key: '1',
        align: 'right',
        render: text => (<h1>{text}</h1>)
    },

    other columns ...
]

并在渲染中： …

我正在与 Gatsby 一起使用样式组件。我使用 styled-components 来设置LinkGatsby 为我的主页提供的组件的样式。

const HomePageLink = styled(Link)`
  display: inline-block;
  font-size: ${fontSizes.xxlarge};
  text-decoration: none;
  box-shadow: none;
  :link,
  :visited {
    color: ${colors.slate};
  }
  :hover,
  :active {
    color: ${colors.red};
  }
`

但是我意识到我还需要<a />使用完全相同的样式来设置纯 html 标签的样式。我想知道有没有办法让上面的样式组件适应<a />标签而不需要像这样重复代码

const HomePageAnchorTag = styled.a`
  display: inline-block;
  font-size: ${fontSizes.xxlarge};
  text-decoration: none;
  box-shadow: none;
  :link,
  :visited {
    color: ${colors.slate};
  }
  :hover,
  :active {
    color: ${colors.red};
  }
`

这真让我抓狂。我对选择下拉菜单和文本字段没有任何问题，但由于某种原因，我无法让复选框以受控方式工作。我希望他们在父组件中“切换”并侦听此事件。

我知道复选框类型的输入有一个“已检查”属性。选中一个复选框会赋予它“on”的值。我采用这个“on”值并将其转换为 true 或 false，并相应地更新组件。

出于某种原因，我无法让它工作，要么总是被选中，要么从未被选中（如果我切换布尔开关）。

export class ControlledCheckbox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      select: false,
    };
  }

  render() {
    console.info("this.state.select - " + this.state.select);

    let sel = false;

    if (this.state.select !== "on") {
      sel = true;
    } else {
      sel = false;
    }

    return (
      <div>
        <input
          type="checkbox"
          checked={sel}
          onChange={this.handleChangeCheckbox}
        />
      </div>
    );
  }

  handleChangeCheckbox = (e) => {
    console.info("here e.currentTarget.value " + e.currentTarget.value);

    this.setState({
      select: e.currentTarget.value,
    });
    //call passed through callback here
  };
}