小编kei*_*kai的帖子

我是反应新手，我已经经历过，draftjs editor但是当我尝试使用代码时，边框没有显示。

这是编辑器的快照：

我的代码：

export default class App extends Component {
  render() {
    return (
      <Container>
        <Modal trigger={<Button>Show Content</Button>}>
          <Modal.Content>
            <Editor />
            <Button>Send</Button>
          </Modal.Content>
        </Modal>
      </Container>
    );
  }
}

这里是整个代码：“ https://codesandbox.io/s/distracted-ritchie-s75re ”

尝试给出边框，但问题是当我写更多单词时，它会超出边框。任何人都可以帮我解决这个问题吗？

我正在使用React Material-UI库，我想有条件地覆盖 TextField 的错误颜色。

当错误属于某种类型时，我需要将 helperText、边框、文本和所需的标记颜色更改为黄色。类似的东西：

否则，我想为所有其他类型的错误保留默认颜色（红色）。我试图遵循在这个代码和盒子中使用的相同原则，但我无法掌握需要更改的所有组件，而且我important几乎每次都必须使用关键字才能看到差异。

我设法有条件地改变了这样的颜色helperText：

                        <TextField
                            label="Name"
                            className={formClasses.textField}
                            margin="normal"
                            variant="outlined"
                            required
                            error={!!errors}
                            helperText={errors && "Incorrect entry."}
                            FormHelperTextProps={{classes: {root: getColorType(AnErrorType)}}}
                        />

该getColorType会返回一个CSS对象和属性颜色设置为对应给定的错误类型之一。前任：

hardRequiredHintText: {
    color: `${theme.palette.warning.light} !important`
},

有没有更简单的方法来覆盖 MUI 错误颜色并查看它反映在所有使用它的组件中？

我正在使用 Menu frommaterial-ui并想更改背景颜色。问题是，当我为菜单赋予颜色时，它会在出现菜单弹出窗口时更改整个页面背景。当我将颜色应用于菜单项时，它会在顶部和底部留下一些灰色阴影，因为所有这些菜单项都包含在一个 div 中。问题沙箱：https : //codesandbox.io/s/material-ui-dropdown-background-color-g88e1

更改菜单背景颜色的正确方法是什么？

我试图createMuiTheme改变这一点，但它改变了我的应用程序中所有菜单的颜色。我只想将此样式应用于其中一个菜单项。所以寻找解决方案来使用makeStyle

我目前正在创建一个弹出对话框。但是，我的对话框位于中间弹出的位置。

当我按下弹出按钮时，如何使位置位于页面的最顶部？

这是我的代码

      <div>
      <div id="so_reg" className="buy_btn" onClick={this.onClickCashBuy.bind(this)}>
         Pop up button
        </div>
         <Dialog className="dialog" modal={false} open={this.state.buy_cash_popup} onRequestClose={this.onClickBuyCashCancel} style={{color: 'green'}} >
               <Test product={{price: this.state.buy_cash_type}} />
      </Dialog>
   </div>

我是新手，并试图自己学习。我开始使用 react-select 在表单上创建下拉列表，现在我试图传递所选选项的值。我的状态是这样的。

this.state = {
  part_id: "",
  failure: ""
};

然后在我的渲染中

const {
  part_id,
  failure
} = this.state;

我的表单看起来有 2 个字段

<FormGroup>
  <Label for="failure">Failure</Label>
  <Input
    type="text"
    name="failure"
    placeholder="Failure"
    value={failure}
    onChange={this.changeHandler}
    required
    />
  </FormGroup>
  <FormGroup>
  <Label for="part_id">Part</Label>
  <Select
    name="part_id"
    value={part_id}
    onChange={this.changeHandler}
    options={option}
  />
  </FormGroup>

在changeHandler这个样子的

changeHandler = e => {
  this.setState({ [e.target.name]: e.target.value });
};

更改处理程序对输入工作正常，但 Select 抛出错误，说无法读取属性名称。我浏览了 API 文档，并为 Select onChange 想出了这样的东西

onChange={part_id => this.setState({ part_id })}

它将 part_id 设置为标签、值对。有没有办法只获得价值？以及我将如何实现相同的multiselect？

假设我有一个主题文件：

主题.js：

import {createMuiTheme} from "@material-ui/core/styles";

export const myTheme = createMuiTheme({
    palette: {
        text: {
            color: "#545F66",
        },
    },
});

和 App.js 文件，其中渲染看起来像这样：

return (
        <MuiThemeProvider theme={myTheme}>
            <CssBaseline />
            <MyComponent />
        </MuiThemeProvider>
    );

现在我知道我可以通过 withStyles 访问主题：

const StyledMyComponent = withStyles(theme => ({
    something: {
        color: theme.palette.text.color
    }    
}))(props => <MyComponent {...props} />);

但我想要实现的是不同的东西。MyComponent 是一个非常大的组件，例如具有名为“react-table-1”的类，我想要的是将类颜色“react-table-1”设置为 theme.palette.text ，如下所示：

const StyledMyComponent = withStyles(theme => ({
    "react-table-1": {
        color: theme.palette.text
    }    
}))(props => <MyComponent {...props} />);

但显然它不起作用。有谁知道这是否可能？我怎样才能做到这一点。

我可以在 css 文件中设置“react-table-1”颜色，但我想通过按钮在 react 内部更改它，这就是为什么我需要这样的东西。

现场演示：https …

我希望 Ant 设计 (React) 分页采用我的语言（西班牙语）。理想的情况是渲染“por p\xc3\xa1gina”而不是下图中的“page”：

（代码）

 pagination={{ defaultPageSize: 3, showSizeChanger: true, pageSizeOptions: [\'5\',\'10\', \'20\', \'30\']}}\n

（图片）

谢谢！

我在用着react-select。当我从 select 中选择一个确定值时，我遇到了下一个问题

类型错误：无法读取未定义的属性“值”

另外，从减速器获取的值todoList没有显示，我看不到它们。

这是我的代码：

import Select from "react-select";
import "./styles.css";
import { searchTodos } from "../../actions/ServiceActions";

class SelectedTodo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTodo: ""
    };
    this.handleChange = this.handleChange.bind(this);
  }
  bringTodos = () => {
    //WHEN I'M EXECUTING THESE CODE LINES I CAN'T SEE TODOS VALUES
    return this.props.todoList.map(todo => {
      return (
        <option key={todo._id} value={todo._id}>
          {todo.name}
        </option>
      );
    });
  };

  handleChange = e => {
    this.setState({ selectedTodo: e.target.value });
  }; …

我正在尝试执行以下操作的 react/react 钩子编写代码。

从父组件获取对象数组作为 prop 使用useState钩子将其设置为状态。根据预期的过滤器（时间和评级）对状态进行排序，并重新渲染子组件。我看到的是，下面的代码在排序后更新了状态，但是即使状态更新了，依赖于该状态的子组件也不会重新渲染。我认为子组件会在状态改变时自动重新渲染？

import React, {useState} from 'react';
import ProfilePostspreview from './ProfilePostspreview';

function ProfileNavigation(props){
   const [newarray, setnewarray]=useState(props.parray);   //'parray' object passed as props and saved as 'newarray' state    
   const otc = () => {  //Function to sort the state by time and set a new state
       let k=newarray;
       setnewarray(k.sort((a, b) => (a.time > b.time) ? -1 : 1 ));
   }
   const orc = () => {  //Function to sort the state by rating and then time …

我有一个应用程序可以从前端获取数据并将其存储在状态中。

对于某些输入，我使用以下方法设置默认值：

  form.setFieldsValue({
    note: text.note,
    gender: text.gender
  });

但我还想设置 RangePicker 的默认值。我有应该处于默认状态的数据：

  useEffect(() => {
    setText({
      note: "2",
      gender: "demo",
      start: "2020-03-09 13:00", //set as default value for Range Picker
      end: "2020-03-27 13:17" //set as default value for Range Picker
    });
  }, []);

如何使用精确设置范围选择器的默认值form.setFieldsValue？链接到我的代码：https://codesandbox.io/s/form-methods-ant-design-demo-hzgg7

我试图从 URL（使用 props.match.params.id）获取id并将其传递给一个变量以重用它。但是 props 是未定义的。我不知道为什么。

任何人都可以看到我是否做错了什么？

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

export default function Recipes() {
  const [recipes, setRecipes] = useState([]);
  useEffect(() => {
    const id = props.match.params.id;
    const getRecipes = async () => {
      const url = `http://localhost:8000/user/recipes/${id}`;
      const result = await axios.get(url);

      setRecipes(result.data);
      console.log("test", recipes);
    };
    getRecipes();
  }, []);

  return (
    <div>
      {recipes.map(recipe => (
        <p>{recipe.title}</p>
      ))}
    </div>
  );
}