小编Dal*_*ron的帖子

ReactJS:显示模态和重新渲染

所以,我试图找出最好的方法来做到这一点:

在反应中显示模态或隐藏模态。在我的主页上,我有很多照片,我当前的状态设置是:

export default class Main extends TrackerReact(Component) {
  constructor(props) {
   super(props);
   this.state = {
     showModal: false,
     modalPhoto: {},
   };

   this.close = this.close.bind(this);
   this.open = this.open.bind(this);
}
close() { this.setState({ showModal: false }); } // basic modal close
open(e) {
  this.setState({ modalPhoto: e });
  this.setState({ showModal: true });
}
Run Code Online (Sandbox Code Playgroud)

当我将 showModal 设置为 true 时,它​​会传递给 bootstrap-react 模式:

<Modal
  show={this.props.show} >
  // ...loads modalPhoto form main state.modalPhoto
</Modal>
Run Code Online (Sandbox Code Playgroud)

问题:每次打开模态时,它都会更改主状态并重新呈现主页面。阻止这种重新渲染发生的最佳实践方法是什么?我试过:

// in the main component
shouldComponentUpdate(nextProps, nextState) {
  if (this.state.showModal !== nextState.showModal) { …
Run Code Online (Sandbox Code Playgroud)

ecmascript-6 reactjs

5
推荐指数
1
解决办法
7643
查看次数

ReactJS:淡入div并根据状态淡出div

所以,我试图根据用户点击的按钮淡入并淡出一组输入.我尝试使用jQuery,但是,div正在逐渐消失并以相同的速度逐渐消失......

我正在使用es6类并做出反应.

我想要的是用户按下按钮和输入淡入.另一个按钮,输入fadeOut.我不介意使用jQuery,但我想了解如何做反应.

renderInputs() {
  if (this.state.addType === "image") {
    return (
      <div className="addContainer">
        <input type="text" className="form-control" />
      </div>
    )
  } else {
    return (
     other inputs
    )
  }
}

render() {
  return (
    <CSSTransitionGroup
      transitionName="fadeInput"
      transitionEnterTimeout={500}
      transitionLeaveTimeout={300}>

      {this.renderInputs()} // this doesn't work but I want this content to be conditional.

    </CSSTransitionGroup>
  )
}

// SCSS
.fadeInput-enter {
  opacity: 0.01;
}

.fadeInput-enter.fadeInput-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.fadeInput-leave {
  opacity: 1;
}

.fadeInput-leave.fadeInput-leave-active {
  opacity: …
Run Code Online (Sandbox Code Playgroud)

reactjs

5
推荐指数
2
解决办法
9455
查看次数

ReactJS:从没有 onChange 事件的道具中选择默认值?

所以,我只是想知道我是否绝对需要在 React 中的选择组件上有一个 onChange 事件处理程序?

我有一个道具传递了我想要选择的选项的默认值。如果我有:

<select 
  value={this.props.defaultValue}
>
  <option value="a">A</option>
  <option value="b">B</option>
</select>
Run Code Online (Sandbox Code Playgroud)

除此之外,它是静态的,因为我相信您对错误很熟悉:

Warning: Failed form propType: You provided a `value` prop to a form field without an `onChange` handler. 
This will render a read-only field.
Run Code Online (Sandbox Code Playgroud)

当我使用 Jquery 获取值时,我不需要状态或子级和父级之间的任何传递......

有没有一种简单的方法可以让 select 从 props 获取默认值,并且仍然作为普通选择运行,其中更改选项会更改我可以用 jquery 获取的值,或者我是否必须有一个状态和一个 onChange 处理程序?

谢谢!

我已经尝试过的:

<select
  defaultValue={this.props.defaultValue} // just returns the first option
> 
  <options etc.>
</select>
Run Code Online (Sandbox Code Playgroud)

另外,我宁愿不使用像 React-Select 这样的外部包......我只想有一个默认值和一个普通的选择......

javascript reactjs

5
推荐指数
1
解决办法
2768
查看次数

ReactJS:检查状态值并根据状态更新渲染的最佳方法?

所以,我有一个具有多个输入的表单来更新状态onChange.

我想要发生的是让用户更改值,当他们更改时,更新表单state以保存这些更改.我的代码使用ES6类:

super(props);
 this.state = {
   post: this.props.content // this is an object {title: '', description: ''}
 }

 // I have all the methods below this.method = this.method.bind(this) up here.
}

handleTitle(title) { // gets title from input onChange event
  let post = update(this.state.post, {title: {$set: title}}); // using import update from 'immutability-helper' for changing object
  this.setState({ post });
  this.checkPostApproval();
} // this all works, post is updated. I have the same code for description.

checkPostApproval() …
Run Code Online (Sandbox Code Playgroud)

ecmascript-6 reactjs

5
推荐指数
1
解决办法
3511
查看次数

React Native:React Navigation - 在每个屏幕中使用相同的标题组件?

所以,我正在尝试使用 React Navigation 并且我想在我的所有屏幕上使用相同的 Header 组件。

我用expo-cli来创建项目。

在我的MainTabNavigator.js文件中,我有一个HomeStackand SettingsStack,它们看起来像这样:

const config = Platform.select({
  web: { headerMode: "screen" },
  default: {}
});

const HomeStack = createStackNavigator(
  {
    Home: HomeScreen
  },
  config
);

HomeStack.navigationOptions = {
  tabBarIcon: ({ focused }) => (
    <NavButton
      focused={focused}
      name={focused ? "star" : "create"}
      label={focused ? "Save" : "New"}
    />
  )
};

HomeStack.path = "";
Run Code Online (Sandbox Code Playgroud)

在文件的底部,我有我的 tabNavigator

const tabNavigator = createBottomTabNavigator(
  {
    HomeStack,
    SettingsStack
  },
  {
    tabBarOptions: {
      inactiveTintColor: "#fff", …
Run Code Online (Sandbox Code Playgroud)

react-native react-native-navigation

0
推荐指数
1
解决办法
5953
查看次数