Comment.js

Question

我正在尝试防止onChange值在每个项目中重复。

例如

评论的onChange方法

Object.keys(this.state.items).forEach(key){
   this.setState({
     comment_body: e.target.value[key]
   })
}

我假设我将不得不遍历键或onChange方法中的某些内容。我不确定如何去做。

类似

伪尝试

{this.state.images.length > 0 ? (
    this.state.images.map( (img, i) => (     
        <Grid item sm={12} md={12} key={img.id} style={{ margin: '30px 0px'}}>
                <Paper style={{padding:'20px 20px'}}>
                    {/* // empty image_title */}
                    <Typography style={{ padding: '30px 5px', letterSpacing:'8px', textTransform:'uppercase'}} variant="h4" align="center">{img.image_title}</Typography> 
                    <Divider style={{ width: '150px', margin:'10px auto', backgroundColor:'#000000'}} variant="middle" />
                <Image image_url={img.img_url} />   
                <Typography variant="h6" align="center">{img.user.username}</Typography> 
                <Typography variant="h6" align="center">{moment(img.created_at).calendar()}</Typography> 
                <Button onClick ={() => this.writeComment(img.id)} variant="outlined" component="span" color="primary"> 
                    {this.state.isComment === img.id ? "Close" : "Write A Comment"}
                </Button>
                {/* here were prevent comments being selected for all items in the array, renders the comment form you clicked on.  */}
                {this.state.isComment === img.id ?
                        <Comment onSubmit={this.commentSubmit} 
                                commentBody={this.state.comment_body } 
                                commentChange={this.handleCommentChange}/> 
                : null}
                {/* hide delete button when user enters comment */}
                {!this.state.isComment ? <Button style={{margin: '0px 20px'}} onClick={() => this.deleteImg(img.id)} variant="outlined" component="span" color="primary">
                    Delete
                </Button> : null}

            </Paper>                              
        </Grid>
    ))
) : (
    <div>
        <Grid item md={8}>
            <Typography>No Images yet</Typography>
        </Grid>
    </div>
)}

还是有更好的方法？不确定。

地图迭代代码

{{1}}

Answer 1

问题在于，所有注释在组件状态中都引用相同的值。我想在您之前的问题中谈到这一点。

您应该做的是像这样将Grid标记分成其自己的组件：

ImageContainer.js

EXECUTE FUNCTION somedum();

alist  LIST{7          }

现在，每个ImageContainer都有其自己的状态值以跟踪和更新。所以没有重复。

然后在您的import React, { Component } from "react"; import Button from '@material-ui/core/Button'; import TextField from '@material-ui/core/TextField'; import Grid from '@material-ui/core/Grid'; import Typography from '@material-ui/core/Typography'; import Paper from '@material-ui/core/Paper'; import Divider from '@material-ui/core/Divider'; import Image from './Image'; import moment from 'moment'; import Comment from './Comment'; class ImageContainer extends React.Component{ state = { isComment: false, comment_body: "" } handleCommentChange = (e) => { this.setState({ comment_body: e.target.value }) } writeComment = (id) => { this.setState({ isComment: this.state.isComment ? '' : id // check if you state is filled to toggle on/off comment }) } commentSubmit = (e) => { e.preventDefault(); console.log(this.state.comment_body); // Axios.post('/images/newComment', this.state.comment_body).then( (response )=> { // const newComment = { ...response.data}; // console.log(newComment); // this.setState({ // comment_body: '' // }) // }) } render(){ const { img } = this.props return( <Grid item sm={12} md={12} key={img.id} style={{ margin: '30px 0px'}}> <Paper style={{padding:'20px 20px'}}> {/* // empty image_title */} <Typography style={{ padding: '30px 5px', letterSpacing:'8px', textTransform:'uppercase'}} variant="h4" align="center">{img.image_title}</Typography> <Divider style={{ width: '150px', margin:'10px auto', backgroundColor:'#000000'}} variant="middle" /> <Image image_url={img.img_url} /> <Typography variant="h6" align="center">{img.user.username}</Typography> <Typography variant="h6" align="center">{moment(img.created_at).calendar()}</Typography> <Button onClick ={() => this.writeComment(img.id)} variant="outlined" component="span" color="primary"> {this.state.isComment === img.id ? "Close" : "Write A Comment"} </Button> {/* here were prevent comments being selected for all items in the array, renders the comment form you clicked on. */} {this.state.isComment === img.id ? <Comment onSubmit={this.commentSubmit} commentBody={this.state.comment_body } commentChange={this.handleCommentChange}/> : null} {/* hide delete button when user enters comment */} {!this.state.isComment ? <Button style={{margin: '0px 20px'}} onClick={() => this.deleteImg(img.id)} variant="outlined" component="span" color="primary"> Delete </Button> : null} </Paper> </Grid> ) } } export default ImageContainer组件中，只需导入Dashboard。

ImageContainer

现在为import ImageContainer from "./ImageContainer"中的每个图像，我们将创建该.map()的唯一实例，并将该图像作为道具传递给component。

ImageContainer

还请记住将事件处理程序连接到{this.state.images.length > 0 ? ( this.state.images.map( (img, i) => ( <ImageContainer img={img}/> )) ) : ( <div> <Grid item md={8}> <Typography>No Images yet</Typography> </Grid> </div> )}组件。至少需要使用您传入的Comment。

Comment.js

props

这里也是一个沙箱，我没有您的import React from "react"; const Comment = props => { return ( <form onSubmit={props.onSubmit}> <input onChange={props.commentChange} value={props.commentBody} /> </form> ); }; export default Comment;组件代码，因此它不会具有相同的样式：https://codesandbox.io/s/young-pine-zmpvr

如何防止地图循环内出现重复的onChange值

1 个答案:

ImageContainer.js

Comment.js