小编May*_*kla的帖子

我想更改hasSubmit密钥的值,就像在第一个代码部分中一样.我知道这不推荐.但第二个代码是异步的,我不想使用的回调函数setState.

• 是什么的差异this.state和setState？
• 有没有办法hasSubmit立即改变国家价值？

第一个代码: hasSubmit

第二个代码: false

加:

场景是:

1. getInitialState()设置hasSubmit在false.
2. submithasSubmit当我点击true按钮时会改变.
3. submit将hasSubmit在提交时更改为.

第一次单击true没有问题,submit将被设置为Second asynchronous code.

但是第二次点击hasSubmit将使用错误true,因为First Code它仍然是hasSubmit,而setState可以解决问题.

好的,我会尽快做到这一点,因为它应该是一个简单的解决方案......

我读了很多类似的问题,答案似乎很明显.从来没有什么我不得不抬头看!但是......我有一个错误,我无法理解如何解决或为什么会发生这种情况.

如下:

class NightlifeTypes extends Component {
constructor(props) {
    super(props);

    this.state = {
        barClubLounge: false,
        seeTheTown: true,
        eventsEntertainment: true,
        familyFriendlyOnly: false
    }
    this.handleOnChange = this.handleOnChange.bind(this);
}

handleOnChange = (event) => {   
    if(event.target.className == "barClubLounge") {
        this.setState({barClubLounge: event.target.checked});
        console.log(event.target.checked)
        console.log(this.state.barClubLounge)
    }
}

render() {
    return (
        <input className="barClubLounge" type='checkbox' onChange={this.handleOnChange} checked={this.state.barClubLounge}/>
    )
}

更多代码围绕着这个,但这就是我的问题所在.应该工作吧？

我也试过这个:

handleOnChange = (event) => {   
if(event.target.className == "barClubLounge") {
    this.setState({barClubLounge: !this.state.barClubLounge});
    console.log(event.target.checked)
    console.log(this.state.barClubLounge)
}

所以我有两个console.log(),都应该是一样的.我确实将状态设置为与event.target.checked它上面的行相同!

但它总是与它应该的相反.

我使用时也一样!this.state.barClubLounge; 如果它开始为假,在我第一次点击它仍然是假的,即使复选框是否被选中是基于状态!!

这是一个疯狂的悖论,我不知道最新情况,请帮忙!

我需要更改渲染函数并在给定特定状态时运行一些子渲染函数,

例如:

render() {
    return (   
        <View style={styles.container}>
            if (this.state == 'news'){
                return (
                    <Text>data</Text>
                )
            }
        </View>
    )
}

如何在不改变场景的情况下实现它,我将使用选项卡动态更改内容.

我是React/Redux的新手并且遇到状态问题.

TrajectContainer.jsx

class TrajectContainer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            trajects: props.trajects,
            onClick: props.onClick
        };
    }

    componentWillReceiveProps(nextProps) {
        console.log('componentWillReceiveProps', nextProps);
        this.setState(nextProps);
    }

    render() {
        // When the componentWillReceiveProps is not present, the this.state will hold the old state
        console.log('rerender', this.state);
        return (<div className="col-md-6">
            <h2>Trajects</h2>
            <button className="btn btn-primary" onClick={this.state.onClick}>Add new Traject</button>
            {this.state.trajects.map(traject => <Traject traject={traject} key={traject.name}/>)}
        </div>)
    }
}

const mapStateToProps = function (store) {
    console.log('mapToStateProps', store);
    return {
        trajects: store.trajects
    };
};

const mapDispatchToProps = function (dispatch, …

我想textfield在用户按键盘输入键时传递值.在onChange()事件中,我得到的值textbox,但如何在enter按下键时获得此值？

码:

import TextField from 'material-ui/TextField';

class CartridgeShell extends Component {

   constructor(props) {
      super(props);
      this.state = {value:''}
      this.handleChange = this.handleChange.bind(this);
   }

   handleChange(e) {
      this.setState({ value: e.target.value });
   }

   render(){
      return(
         <TextField 
             hintText="First Name" 
             floatingLabelText="First Name*"
             value={this.state.value} 
             onChange={this.handleChange} 
             fullWidth={true} />
      )
   }
}

我对React比较陌生,我想知道这里的标准是什么.

想象一下,我有一个像这样的反应路由器:

<Router history={history}>
    <Route path="/" component={App}>
      <Route path="home component={Home} />
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox} />
      <Route path="contacts" component={Contacts} />
    </Route>
</Router>

现在我想删除两个路由,如果prop.mail设置为false,所以一个明智的方式,如下所示:

<Router history={history}>
      <Route path="/" component={App}>
        <Route path="home component={Home} />
        <Route path="about" component={About} />

        { if.this.props.mail ? 
          <Route path="inbox" component={Inbox} />
          <Route path="contacts" component={Contacts} />
        : null }

      </Route>
 </Router>

但是有2条路线和React返回错误:

表达式必须有一个父元素.

我不想在这里使用多个ifs.什么是首选的React处理方式？

在reducer中更新状态的更好方法是什么？

case DELETE_INTEREST:
    let deleteInterests = state.user.interests;
    let index = deleteInterests.findIndex(i => i == action.payload);
    deleteInterests.splice(index, 1);
    return { ...state, user: { ...state.user, interests: deleteInterests } };

ESLint不喜欢在reducer中的case块内部使用let语句,得到:

eslint:no-case-declaration - case块中的意外词法声明

我们应该避免在render内部绑定方法,因为在重新渲染期间它将创建新方法而不是使用旧方法,这将影响性能.

所以对于这样的场景:

<input onChange = { this._handleChange.bind(this) } ...../>

我们可以_handleChange在构造函数中绑定方法:

this._handleChange = this._handleChange.bind(this);

或者我们可以使用属性初始化器语法:

_handleChange = () => {....}

现在让我们考虑一下我们想要传递一些额外参数的情况,让我们说在一个简单的待办事项应用中,点击项目我需要从数组中删除项目,因为我需要传递每个项目索引或待办事项名称onClick方法:

todos.map(el => <div key={el} onClick={this._deleteTodo.bind(this, el)}> {el} </div>)

现在假设todo名称是唯一的.

根据DOC:

此语法的问题是每次组件呈现时都会创建不同的回调.

题:

如何在render方法中避免这种绑定方式或者这有什么替代方法？

请提供任何参考或示例,谢谢.

我正在使用create-react-app来启动React项目.在最新的React 15.5.3软件包中,它出现以下警告:

警告:不建议通过主React包访​​问PropTypes.请改用npm中的prop-types包.

我已经关注了博客:

npm install prop-types 和 import PropTypes from 'prop-types';

但它不起作用.我不使用任何代码PropTypes或props代码:

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class App extends Component {
    constructor() {
        super();
        this.state = {
            videoVisible: true,
        };
    }

    ......
}

如何解决？

谢谢.

使用InputReact Material UI库(v1.0 beta)中的组件,我试图删除使用伪元素渲染的下划线.

const styleSheet = createStyleSheet('searchInput', () => ({
    underline: {
        '&:before': {
            height:0
        }
    }
}));

const SearchInput = ({ classes, placeholder, value, onChange }) => {
    return (
        <Input
            classes={classes}
            placeholder={placeholder}
            value={value}
            onChange={onChange} />
    );
};

当我尝试定位时&:before,我得到以下错误.覆盖样式并删除此下划线的正确方法是什么？

警告:Material-UI:.searchInput-underline-1572343541:before提供给classes属性对象的键 未在Input中实现.

您只能覆盖下列之一:根,formControl,inkbar,错误输入,残疾人,突出重点,强调,多行inputDisabled,inputSingleline,inputMultiline,FULLWIDTH,标签+ .MuiInput-formControl-583691922,.MuiInput-inkbar-171024778 :之后,.MuiInput-inkbar-171024778.MuiInput为重点-2315792072:之后,.MuiInput错误 - 3674946725:之后,.MuiInput输入-3582851417 :: - WebKit的输入占位符,.MuiInput输入-3582851417 :: -moz-占位符,.MuiInput输入-3582851417:-MS-输入占位符,.MuiInput输入-3582851417 :: - MS-输入占位符,.MuiInput输入-3582851417:专注,.MuiInput输入-3582851417: :-webkit-搜索装饰,标签+ .MuiInput-formControl-583691922> .MuiInput输入-3582851417,标签+ .MuiInput-formControl-583691922> .MuiInput输入-3582851417 :: - webkit的输入占位符,标签+ .MuiInput-formControl-583691922> .MuiInput输入-3582851417 :: - MOZ-占位符,标签+ .MuiInput-formControl-583691922> .MuiInput输入-3582851417:-MS-输入占位符,标签+ .MuiInput-formControl- …