reactjs - 道具 onChange 没有触发
问题描述
每当用户在选择编辑时输入一个值时,我都在努力输入一个值,它不会让我输入一个值。
我怀疑这应该与onChange
方法有关,我不确定我应该做什么。我认为onChange
方法是对的。
我读了一个与此类似的问题,但没有我正在寻找的解决方案。
PostList.js
import React, { Component } from 'react';
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import moment from 'moment';
import {connect} from 'react-redux';
import {DeletePost} from '../actions/';
import PostItem from './PostItem';
const Styles = {
myPaper: {
margin: '20px 0px',
padding: '20px'
}
}
class PostList extends Component{
constructor(props){
super(props);
this.state ={
isEditing:false,
isEditingId:null
}
}
// Return a new function. Otherwise the DeletePost action will be dispatch each
// time the Component rerenders.
removePost = (id) => () => {
this.props.DeletePost(id);
}
// this will be onChange used for the <Editable component/>
onChange = (e) => {
e.preventDefault();
this.setState({
[e.target.title]: e.target.value
})
}
formEditing = (id) => ()=> {
this.setState({
isEditingId: id
});
}
render(){
const {posts, editForm, isEditing, editChange} = this.props;
return (
<div>
{posts.map((post, i) => (
<Paper key={post.id} style={Styles.myPaper}>
{/* {...post} prevents us from writing all of the properties out */}
<PostItem editChange={this.onChange} editForm={this.formEditing} isEditing={this.state.isEditingId === post.id} removePost={this.removePost} {...post} />
</Paper>
))}
</div>
)
}
}
const mapDispatchToProps = (dispatch) => ({
// Pass id to the DeletePost functions.
DeletePost: (id) => dispatch(DeletePost(id))
});
export default connect(null, mapDispatchToProps)(PostList);
可编辑的.js
import React from 'react';
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import TextField from '@material-ui/core/TextField';
const Editable = (props) => (
<div>
<TextField
id="outlined-name"
label="Title"
style={{width: 560}}
name="title"
value={props.editField}
onChange={props.editChange}
margin="normal"
variant="outlined"/>
</div>
)
export default Editable;
PostItem.js
import React, { Component } from 'react';
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import moment from 'moment';
import Editable from './Editable';
const Styles = {
myPaper: {
margin: '20px 0px',
padding: '20px'
}
}
// editChange will passed in as an argument. So the <Editable/> component can
//use it
const PostItem = ({ title, id, removePost, createdAt, post_content, username, editForm, isEditing, editChange}) => {
return(
<div>
<Typography variant="h6" component="h3">
{/* if else teneray operator */}
{isEditing ? (
<Editable editField={title} editChange={editChange}/>
): (
<div>
{title}
</div>
)}
</Typography>
<Typography component="p">
{post_content}
<h5>
by: {username}</h5>
<Typography color="textSecondary">{moment(createdAt).calendar()}</Typography>
</Typography>
{!isEditing ? (
<Button variant="outlined" type="submit" onClick={editForm(id)}>
Edit
</Button>
):(
<Button variant="outlined" type="submit" onClick={editForm(null)}>
Update
</Button>
)}
<Button
variant="outlined"
color="primary"
type="submit"
onClick={removePost(id)}>
Remove
</Button>
</div>
)
}
export default PostItem;
更新()
我想保留当前的标题值而不是删除该值。
解决方案
我认为您没有正确传递您的标题状态。将这些添加到您的状态以初始化为空:
this.state ={
isEditing:false,
isEditingId:null,
title: ""
}
onChange 到这个
onChange = (e) => {
e.preventDefault();
this.setState({
title: e.target.value
})
}
PostItem到这个
const PostItem = ({ title, id, removePost, createdAt, post_content, username, editForm, isEditing, editChange }) => {
return(
<div>
<Typography variant="h6" component="h3">
{/* if else teneray operator */}
{isEditing ? (
<Editable editField={title} editChange={editChange}/>
): (
<div>
{title}
</div>
)}
</Typography>
<Typography component="p">
{post_content}
<h5>
by: {username}</h5>
<Typography color="textSecondary">{moment(createdAt).calendar()}</Typography>
</Typography>
{!isEditing ? (
<Button variant="outlined" type="submit" onClick={editForm(id)}>
Edit
</Button>
):(
<Button variant="outlined" type="submit" onClick={editForm(null)}>
Update
</Button>
)}
<Button
variant="outlined"
color="primary"
type="submit"
onClick={removePost(id)}>
Remove
</Button>
</div>
)
}
export default PostItem;
然后将标题作为道具传递给您的 PostItem,
例如
<PostItem title={this.state.title} editChange={this.onChange} editForm={this.formEditing} isEditing={this.state.isEditingId === post.id} removePost={this.removePost} {...post} />
更新
改变这个
<Editable editField={myTitle} editChange={editChange}/>
to(这使得标题附加在值中,而您仍然可以随意编辑值以改进它)它的行为有点错误或奇怪,但它可以工作。
<Editable editField={title} editChange={editChange}/>
推荐阅读
- javafx - 在 Jar 中为 Gluon Scene Builder 11.00 创建自定义控件
- php - 无论如何要通过 WP-Config.php 做到这一点?(通配符重定向除了 wp-admin)
- c# - 如何根据日历月的变化增加 int 变量
- go - 打印 time.Time 时出现意外输出
- android - 第一个活动到第二个活动(意图、数据库和适配器)
- c# - 模拟 IScheduler 进行单元测试
- java - 为什么这个 Spring 应用程序不起作用?
- java - 无法在选项卡布局中创建动态选项卡
- excel - Excel公式搜索范围内的单词并显示相应的ID
- c - 不知道为什么优化器不正确地优化我的方法