所以，我试图找出最好的方法来做到这一点：
在反应中显示模态或隐藏模态。在我的主页上，我有很多照片，我当前的状态设置是：
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 });
}
当我将 showModal 设置为 true 时，它会传递给 bootstrap-react 模式：
<Modal
show={this.props.show} >
// ...loads modalPhoto form main state.modalPhoto
</Modal>
问题：每次打开模态时，它都会更改主状态并重新呈现主页面。阻止这种重新渲染发生的最佳实践方法是什么？我试过：
// in the main component
shouldComponentUpdate(nextProps, nextState) {
if (this.state.showModal !== nextState.showModal) { …所以,我试图根据用户点击的按钮淡入并淡出一组输入.我尝试使用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: …所以，我只是想知道我是否绝对需要在 React 中的选择组件上有一个 onChange 事件处理程序？
我有一个道具传递了我想要选择的选项的默认值。如果我有：
<select
value={this.props.defaultValue}
>
<option value="a">A</option>
<option value="b">B</option>
</select>
除此之外，它是静态的，因为我相信您对错误很熟悉：
Warning: Failed form propType: You provided a `value` prop to a form field without an `onChange` handler.
This will render a read-only field.
当我使用 Jquery 获取值时，我不需要状态或子级和父级之间的任何传递......
有没有一种简单的方法可以让 select 从 props 获取默认值，并且仍然作为普通选择运行，其中更改选项会更改我可以用 jquery 获取的值，或者我是否必须有一个状态和一个 onChange 处理程序？
谢谢！
我已经尝试过的：
<select
defaultValue={this.props.defaultValue} // just returns the first option
>
<options etc.>
</select>
另外，我宁愿不使用像 React-Select 这样的外部包......我只想有一个默认值和一个普通的选择......
所以,我有一个具有多个输入的表单来更新状态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() …所以，我正在尝试使用 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 = "";
在文件的底部，我有我的 tabNavigator
const tabNavigator = createBottomTabNavigator(
{
HomeStack,
SettingsStack
},
{
tabBarOptions: {
inactiveTintColor: "#fff", …