im尝试在文本框中显示值，im尝试在文本框中显示值im尝试在文本框中显示值，im尝试在文本框中显示值，im尝试在文本框中显示值文本框中显示的值
const DialogTitle = withStyles(theme => ({
root: {
borderBottom: "1px solid #007bff",
margin: 0,
padding: 10
},
closeButton: {
position: "absolute",
right: 5,
top: 5,
color: "#007bff"
}
}))(props => {
const { children, classes, onClose } = props
return (
<MuiDialogTitle disableTypography className={classes.root}>
<span className="avenir-black-primary ml-4 mb-0" style={{ fontSize: "24px" }}>
{children}
</span>
{onClose ? (
<IconButton aria-label="Close" className={classes.closeButton} onClick=
{onClose}>
<CloseIcon />
</IconButton>
) : null}
</MuiDialogTitle>
)
})
export default class EditComment extends Component {
setRedirect = () => {
window.location.reload()
}
constructor (props) {
super(props);
this.state = {
project:"",
project_id:"",
department:"",
type:"",
status:"",
subject: '',
description: '',
createdBy: "",
notify:"",
attachment: '',
listProjectName : [],
listDepartment : [],
listType : [],
listStatus : [],
listCreatedBy : [],
listUser : [],
detailComment : null,
commentIdSelected : [],
commentData : []
};
}
handleChange = (e) => {
const target = e.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
if( name == "description" ){
//console.log( "target" , target.value )
Promise.all([fetch(`api/v1/ticketcomment/viewbyid/${target.value}`), fetch("api/v1/projects/filters")])
.then(([ticketsResp, filtersResp]) => {
return Promise.all([ticketsResp.json(), filtersResp.json()])
})
.then(([tickets, filters]) => {
this.setState({ listUser: tickets.user})
})
.catch(error => console.log(error))
}
this.setState({
[name]: value
})
}
onSubmit = async (e) => {
const {detailComment , commentIdSelected} = this.state;
e.preventDefault();
await this.setState({response : null});
var form = {
Description: this.state.description,
CommentId : commentIdSelected
}
//console.log(form)
const url = "api/v1/ticket/editticket"
await fetch(url, {
method: "POST",
body: JSON.stringify(form),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
} })
.then(res => {
return res.json()})
.then(response => {
this.setState({response})})
.catch(error => console.error('Error:', error));
if(this.state.response.status === 'success'){
this.setState({open:true})
window.location.reload()
}
}
handleClose = (event, reason) => {
if (reason === 'clickaway') {
return;
}
this.setState({ open: false });
};
handleMultiChange = name => async value =>{
await this.setState({
[name] : value
})
}
handleInit() {
console.log('FilePond instance has initialised', this.pond);
}
async componentWillReceiveProps(nextProps){
const detailComment = nextProps.detailComment;
const commentIdSelected = nextProps.commentIdSelected;
if(commentIdSelected !== null ){
await this.setState({commentIdSelected : commentIdSelected});
}
//console.log( "detailTicketProps", nextProps.detailTicket)
if(detailComment !== null || detailComment !== undefined){
await this.setState({detailComment, comment: detailComment.description});
}
else{
return "No data"
}
}
render() {
const { isDialogOpen, handleDialogClose, classes, onClose } = this.props
const { attachment,detailComment} = this.state;
return (
<>
{this.state.detailComment? (
<>
<Dialog open={isDialogOpen} onClose={handleDialogClose} fullWidth={true} maxWidth="md">
<DialogTitle onClose={handleDialogClose}>Edit Comment</DialogTitle>
<DialogContent>
<AvForm onSubmit={(e) => this.onSubmit(e)}>
<Row style={{ margin: "1.5rem 3rem" }} className="new-tasks-dialog">
<Col md="6">
<AvGroup style={{ marginTop: "2rem" }}>
<Label className="avenir-black-primary" for="desc">
Commented
</Label>
<AvInput required type="text" name="description" value={this.state.description} onChange={e=>this.handleChange(e)} placeholder= ""/>
<AvFeedback>Description required</AvFeedback>
</AvGroup>
<Button
color="primary"
className="px-4"
style={{ fontSize: 12, marginright: 10, marginTop: "10%" }}>
Save
</Button>
</Col>
</Row>
</AvForm>
</DialogContent>
</Dialog>
</>): (
<div></div>
)}
</>
)
}
}**
im尝试使值显示在文本框中，
//这是另一页 //第2页（DETAILCOMMENT.JS）
const styles = theme => ({
tableCell: {
paddingRight: 25,
paddingLeft: 25,
marginLeft: 10
},
tableCellTight: {
paddingRight: 20,
paddingLeft: 20
},
tableCellHeader: {
minWidth: 200,
paddingRight: 1,
fontSize: 14,
border: '1px solid grey'
},
tableCellHeader2: {
minWidth: 250,
border: '1px solid grey',
fontSize: 16,
color: 'black'
}
})
class DetailComment extends React.Component {
state = {
data : null,
tickets : [],
datas : null,
commentData : [],
detailComment : [],
commentIdSelected : []
}
async componentDidMount(){
var idTickets = this.props.id;
await Promise.all([fetch(`api/v1/ticketcomment/viewbyid/${idTickets}`)])
.then(([listCommentResp]) => {
return Promise.all([listCommentResp.json()])
})
.then(([listComment]) => {
this.setState({ commentData: listComment[0], ticketIdSelected : idTickets })
console.log( "list Comment : " , listComment)
})
.catch(error => console.log(error))
}
async handleDialogOpen(value) {
await Promise.all([fetch(`api/v1/ticketcomment/viewdetail/${value}`)])
.then(([detailCommentResp]) => {
return Promise.all([detailCommentResp.json()])
})
.then(([detailComment]) => {
this.setState({ detailComment: detailComment , commentIdSelected : value })
console.log( "detailTicketedits" , detailComment)
})
.catch(error => console.log(error))
this.setState({ isDialogOpen: true })
}
handleDialogClose = () => {
this.setState({ isDialogOpen: false })
}
render() {
const { data, handleSelected, classes, statusOnchange } = this.props
const {tickets} = this.state
const { detailComment, detailmoveto , commentIdSelected } = this.state
return (
<div style={{ overflowX: "auto" , width: 5000}}>
<br />
<Table style={{ width:500, border:'1px solid grey'}}>
<TableHead className={classes.tableHead}>
<TableRow>
<TableCell className={classes.tableCellHeader} >Actions</TableCell>
<TableCell className={classes.tableCellHeader} >Commented</TableCell>
<TableCell className={classes.tableCellHeader} >Created At</TableCell>
</TableRow>
</TableHead>
{this.state.commentData.map(c =>
<TableBody>
<TableRow >
<TableCell className={classes.tableCellHeader} component="th" scope="row" >
<i onClick={() => this.handleDialogOpen(c.id) } className={`fa fa-pencil-square-o ${classes.iconEdit}`} style={{textAlign:'center'}}/>
</TableCell>
<TableCell className={classes.tableCellHeader} component="th" scope="row"> {c.description} </TableCell>
<TableCell className={classes.tableCellHeader} component="th" scope="row"> {c.created_at} </TableCell>
</TableRow>
</TableBody>
)}
<EditComment
detailComment={detailComment}
commentIdSelected={commentIdSelected}
handleDialogClose={this.handleDialogClose}
isDialogOpen={this.state.isDialogOpen}/>
</Table>
</div>
)
}
}
export default withStyles(styles)(DetailComment)