所以,我试图找出最好的方法来做到这一点:
在反应中显示模态或隐藏模态。在我的主页上,我有很多照片,我当前的状态设置是:
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) 所以,我试图根据用户点击的按钮淡入并淡出一组输入.我尝试使用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) 所以,我只是想知道我是否绝对需要在 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 这样的外部包......我只想有一个默认值和一个普通的选择......
所以,我有一个具有多个输入的表单来更新状态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) 所以,我正在尝试使用 React Navigation 并且我想在我的所有屏幕上使用相同的 Header 组件。
我用expo-cli
来创建项目。
在我的MainTabNavigator.js
文件中,我有一个HomeStack
and 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)