小编Chr*_*ris的帖子

我有一个React组件,我想在单击时切换一个css类.

所以我有这个:

export class myComponent extends React.Component {
  constructor() {
    super();
    this.state = { clicked: false };
    this.handleClick = this.handleClick.bind(this);
  }

  render() {
    return (
      <div>
        <div onClick={this.clicked}><span ref="btn" className="glyphicon">&nbsp;</span></div>
      </div>
    );
  }

  handleClick() {
    this.refs.btn.classList.toggle('active');
  }

  componentDidMount() {
    this.refs.btn.addEventListener('click', this.handleClick);
    this.setState({
      clicked: this.state.clicked = true,
    });
  }

  componentWillUnmount() {
    this.refs.btn.removeEventListener('click', this.handleClick);
    this.setState({
      clicked: this.state.clicked = false,
    });
  }
}

这个问题是ESLint不断告诉我"this.refs"已经折旧了.

我该怎么做？如何修复它以便不使用折旧代码？

我有一个包含各种输入字段和两个按钮的表单; 一个用于提交,一个用于取消.

<form id="create-course-form">
  <input type="text" name="course_Name" ref="fieldName">
  <input type="text" name="course_org" ref="fieldOrg">
  <input type="text" name="course_Number" ref="fieldNum">

  <input type="submit" name="saveCourse" value="Create">
  <input type="button" name="cancelCourse" value="cancel" onClick={this.cancelCourse}>
</form>

我想要的是在单击取消按钮时清空所有输入.到目前为止,我已经设法通过使用每个输入的ref prop 来做到这一点.

cancelCourse(){
  this.refs.fieldName.value="";
  this.refs.fieldorg.value="";
  this.refs.fieldNum.value="";
}

但是,我想清空输入字段而不必单独清空每个输入字段.我想要类似的东西(jQuery):$('#create-course-form input[type=text]').val('');

我想将图像设置为背景,但图像名称可能是bg.png或bg.jpg.

如果默认背景不存在,是否有任何非JavaScript方法可以创建备用图像的后备？

body{
    background: url(bg.png);
    background-size: 100% 100%;
    width: 100vw;
    height: 100vh;
    margin: 0;
}

如何将没有价值的道具传递给反应组件？

<SomeComponent disableHeight> {/* here */}
    {({width}) => (
        <AnotherComponent
            autoHeight {/* and here */}
            width={width}
            height={300}
            {...otherProps}
        />
    )}
</SomeComponent>

注意 - 没有为这些道具指定默认道具值.

我似乎无法找到任何引用,但通过观察true默认情况下分配给它们的属性的值.

我是 React 的新手，只是对 setState 方法有疑问。假设我们有一个组件：

class MyApp extends React.Component {

  state = {
    count: 3
  };

  Increment = () => {
    this.setState((prevState) => ({
      options: prevState.count + 1)
    }));
  }
}

那么为什么我们必须在 setState 方法中使用 prevState 呢？为什么我们不能这样做：

this.setState(() => ({
  options: this.state.count + 1)
}));

我试图在JSX中使用pre标签.当你在JSX中使用pre标签时,它根本不格式化.为什么？为了使用pre标签,我需要做这样的事情:

const someCodeIWantToFormat = "var foo = 1"
const preBlock = { __html: "<pre>" + pythonCode + "</pre>" };
return(
  <div dangerouslySetInnerHTML={ preBlock } />;
)

为什么？

如何在不改变HTML源代码的情况下重新排序div？

例如,我希望div以#div2,#div1,#div3的顺序出现,但在HTML中它们是:

<div id="#div1"></div>  
<div id="#div2"></div>  
<div id="#div3"></div>

谢谢!

我是React的新手,试图掌握语法.

我正在React 15环境中开发(使用react-starterify模板),并且一直在使用下面的VERSION 2中的语法,但是,我在Facebook的React页面中找到的大多数示例和教程都是VERSION 1.有什么区别这两个什么时候我应该使用另一个？

版本1

var MyComponent = React.createClass({
  render: function() {
    return (
      <ul>
        // some list
      </ul>
    );
  }
});

module.exports = MyOtherComponent;

版本2

const MyComponent = () => (
  <ul>
    // some list
  </ul>
);

export default MyComponent;

我怎样才能https://cdnjs.cloudflare.com/ajax/libs/react-router/4.0.0-2/react-router.min.js使用https://cdnjs.cloudflare.com/ajax/libs/react-router/3.0.1/ReactRouter.min.js？

使用3.x以下的示例.

HTML

<script src="https://unpkg.com/react@15.4.2/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/3.0.1/ReactRouter.min.js"></script>

JS

let { Router, IndexRoute, Redirect, Route, Link, browserHistory } = ReactRouter;

history.replaceState(0,0,'/');

const Main = () =>
  <Router history={browserHistory}>

    <Route path='/' component={App}>
      <IndexRoute component={Home}/>
      <Route path='map' component={Map}/>
      <Route path='settings' component={Settings}/>
            <Redirect from='foo' to='/' />
      <Route path='*' component={NotFound}/>
    </Route>

  </Router>

const App = props => 
  <div>
    <Navigation>
      <Link to='/map'>Map</Link>
      <Link to='/settings'>Settings</Link>
      <Link to='/foo'>Foo</Link>
    </Navigation>

    {props.children}

  </div>

const Navigation = props => <nav {...props} />
const Home = …

我目前正在尝试将验证添加到使用material-ui组件构建的表单.我有它的工作,但问题是,我目前正在进行的方式验证功能当前正在调用输入中的每个状态更改(即每个键入的字母).但是,我只希望在键入停止后进行验证.

鉴于我目前的代码:

class Form extends React.Component {

    state = {open: false, email: '', password: '', email_error_text: null, password_error_text: null, disabled: true};

    handleTouchTap() {
        this.setState({
            open: true,
        });
    }

    isDisabled() {
        let emailIsValid = false;
        let passwordIsValid = false;

        if (this.state.email === "") {
            this.setState({
                email_error_text: null
            });
        } else {
            if (validateEmail(this.state.email)) {
                emailIsValid = true
                this.setState({
                    email_error_text: null
                });
            } else {
                this.setState({
                    email_error_text: "Sorry, this is not a valid email"
                });
            }
        }

        if (this.state.password === "" || …