【发布时间】：2017-11-24 19:37:32
【问题描述】：
这里是超级新手 React 学习者！我想请你帮忙解决一些问题。 我想在按钮单击时淡入/淡出单独的组件（不带 jquery）
*注意这两个组件在不同的js文件中
更具体一点：
我希望在页面加载开始时加载此组件：
import React from "react";
export default class ViewContents extends React.Component {
render(){
return (
<div className="greeting-container">
<button className="add">Add New Memories</button>
<button className="view">View Memories</button>
</div>
)
}
}
点击按钮
<button className="add">Add New Memories</button>
加载这个组件：
export default class Inputs extends React.Component {
constructor(){
super();
this.state ={
location: '',
date: '',
group: '',
places: '',
placesDescription: '',
restaurants: '',
resDescription: '',
highlights: '',
photo: '',
allTrips: {}
}
this.handleChange = this.handleChange.bind(this);
this.addTravels = this.addTravels.bind(this);
this.removeEntry = this.removeEntry.bind(this);
this.uploadPhoto = this.uploadPhoto.bind(this);
}
componentDidMount(){
const dbRef = firebase.database().ref();
dbRef.on("value",(firebaseData) => {
console.log(firebaseData.val());
const travelArray = [];
const travelData = firebaseData.val();
for (let travelKey in travelData) {
travelArray.push({
});
}
this.setState({
allTrips: travelData,
})
})
}
handleChange(e){
console.log(e.target.value);
this.setState({
[e.target.name]: e.target.value
})
}
addTravels(e){
e.preventDefault();
const newTrip = {
location: '',
date: '',
group: '',
places: '',
restaurants: '',
highlights: '' */
location: '',
date: '',
group: '',
places: '',
placesDescription: '',
restaurants: '',
resDescription: '',
highlights: '',
photo: ''
})
const usersRef = firebase.database().ref();
usersRef.push(newTrip)
this.state.photo = ''
}
removeEntry(key){
console.log(key)
const removeMe = firebase.database().ref(key);
removeMe.remove();
}
uploadPhoto(e) {
console.log('photo upload begin')
this.setState({
show: true
})
let file = e.target.files[0];
const storageRef = firebase.storage().ref('photos/' + file.name);
const task = storageRef.put(file).then(() => {
const urlObject = storageRef.getDownloadURL().then((data) => {
console.log('photo upload DONE')
this.setState({
photo: data,
})
})
});
}
render() {
return (
<div className="main-input-container">
<form action="" className="form-input" onSubmit={this.addTravels}>
<div className="form-container">
<fieldset className="date-location-input">
<label htmlFor="location-travelled">Destination</label>
<input name="location" type="text" id="location-travelled" value={this.state.location} onChange={this.handleChange}/>
<label htmlFor="date-travelled">Date</label>
<input type="date" name="date" required="true" value={this.state.date} onChange={this.handleChange}/>
</fieldset>
<fieldset className="group-mates-input">
<label htmlFor="travel-mates">Who did you go with?</label>
<input name="group" type="text" id="travel-mates" value={this.state.group} onChange={this.handleChange}/>
</fieldset>
<fieldset className="places-input">
<label htmlFor="places-visited">Places You Visited</label>
<input name="places" type="text" id="places-visited1" value={this.state.places} onChange={this.handleChange}/>
</fieldset>
<fieldset>
<label htmlFor="places-visited-textarea1">Places Description</label>
<textarea name="placesDescription" id="places-visited-textarea1" value={this.state.placesDescription} onChange={this.handleChange}></textarea>
</fieldset>
<fieldset className="restaurants-input">
<label htmlFor="res-visited">Restuarants / Food Tried</label>
<input name="restaurants" type="text" id="res-visited" value={this.state.restaurants} onChange={this.handleChange}/>
</fieldset>
<fieldset>
<label htmlFor="res-textarea">Restaurant Descirption</label>
<textarea name="resDescription" id="res-textarea" value={this.state.resDescription} onChange={this.handleChange}></textarea>
</fieldset>
<fieldset className="highlights-input">
<label htmlFor="highlights">Highlights of Trip</label>
<textarea name="highlights" id="highlight-textarea" cols="30" rows="10" value={this.state.highlights} onChange={this.handleChange}></textarea>
<input type="file" accept="image/*" onChange={this.uploadPhoto} />
</fieldset>
</div>
<input type="submit"/>
</form>
<div className="contents-container">
{Object.keys(this.state.allTrips).map((travels, i) => {
console.log(this.state.allTrips[travels].group, "hello")
const allTravels = this.state.allTrips[travels];
return (
<details>
<summary>
<h2>{allTravels.date}</h2>
</summary>
<h3 className="sub-heading">Places Visited:</h3>
<p className="para">{allTravels.places}</p>
<h3 className="sub-heading">Description</h3>
<p className="para">{allTravels.placesDescription}</p>
<h3 className="sub-heading">Went With</h3>
<p className="para">{allTravels.group}</p>
<h3 className="sub-heading">Restaurants Tried</h3>
<p className="para">{allTravels.restaurants}</p>
<h3 className="sub-heading">Description</h3>
<p className="para">{allTravels.resDescription}</p>
<h3 className="sub-heading">HIghlights</h3>
<p className="para">{allTravels.highlights}</p>
<div>Photos:
<img src={allTravels.photo} alt=""/>
</div>
<button onClick={() => this.removeEntry(travels)}>Delete</button>
</details>
)
})}
</div>
</div>
);
}
}
我尝试了一些代码，在其中添加了一些 css/更改状态，但它最终破坏了我的代码:(
【问题讨论】：
-
你说你尝试过'添加css/改变状态'是什么意思。通过使用状态变量作为布尔值来控制
className交换 DOM 元素，我已经取得了一致的成功，当然，使用适当的 classNames 进行转换。 -
我试图关注这个资源：wikiwi.github.io/react-css-transition 在我的构造函数中使用 activeClassName, defaultClassName ，将不透明度从 0 更改为 1，但是，因为我正在通过反复试验做所有事情，所以我我很难将这些状态置于正确的语法中
-
react-css-transition对于您的需求来说不是必需的，而且实际上很难使用，因为它对约定非常严格。你只需要常规的 CSS。查看我在我的 npm 包的演示页面上的 css。我所做的只是将我的班级名称从hidden-false换成hidden-true，然后我就完成了过渡。我使用我的 className 的布尔值进行此交换，其中布尔值是我状态中的变量。 -
非常感谢，这真的很有帮助！！！
标签： javascript html reactjs firebase