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);

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; 

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;

import React，{Component}来自'React'；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core/Button”导入按钮；
从“@material ui/core/Typography”导入排版；
从“力矩”中导入力矩；
从'react redux'导入{connect}；
从“../actions/”导入{DeletePost}；
从“./positem”导入positem；
常量样式={
我的论文：{
保证金：“20px 0px”，
填充：“20px”
}
}
类PostList扩展组件{
建造师（道具）{
超级（道具）；
这个州={
i编辑：错，
isEditingId:null
}
}
//返回一个新函数。否则DeletePost操作将在每个
//对组件重新加载进行计时。
removePost=（id）=>（）=>{
this.props.DeletePost（id）；
}
//这将在更改后用于
onChange=（e）=>{
e、 预防默认值（）；
这是我的国家({
[e.target.title]：e.target.value
})
}
表单编辑=（id）=>（）=>{
这是我的国家({
isEditingId:id
});
}
render（）{
const{posts，editForm，isEditing，editChange}=this.props；
返回(
{posts.map（（post，i）=>(
{/*{…post}阻止我们将所有属性写入*/}
))}
)
}
}
const mapDispatchToProps=（调度）=>({
//将id传递给DeletePost函数。
DeletePost：（id）=>调度（DeletePost（id））
});
导出默认连接（null，mapDispatchToProps）（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);

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; 

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;

从“React”导入React；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core/Button”导入按钮；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/TextField”导入TextField；
常量可编辑=（道具）=>(
)
导出默认可编辑；

positem.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);

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; 

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;

import React，{Component}来自'React'；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core/Button”导入按钮；
从“@material ui/core/Typography”导入排版；
从“力矩”中导入力矩；
从“./Editable”导入可编辑文件；
常量样式={
我的论文：{
保证金：“20px 0px”，
填充：“20px”
}
}
//editChange将作为参数传入。因此组件可以
//使用它
const positem=（{title，id，removePost，createdAt，post\u content，username，editForm，isEditing，editChange}）=>{
返回(
{/*if-else-teneray操作符*/}
{i编辑(
): (
{title}
)}         
{post_content}
收件人：{username}
{时刻（createdAt）.calendar（）}
{！我正在编辑(
编辑
):(
更新
)}
去除
)
}
导出默认positem；

更新（）

我希望保留当前标题值，而不是删除该值

---

我认为你没有正确地传递你的头衔状态。将这些添加到您的状态以初始化为空：

this.state ={
     isEditing:false,
     isEditingId:null,
     title: ""
}

一旦改变这个

  onChange = (e) => {
        e.preventDefault();
        this.setState({
            title: e.target.value
        })
    }

将项目发布到此

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;

const positem=（{title，id，removePost，createdAt，post\u content，username，editForm，isEditing，editChange}）=>{
返回(
{/*if-else-teneray操作符*/}
{i编辑(
): (
{title}
)}         
{post_content}
收件人：{username}
{时刻（createdAt）.calendar（）}
{！我正在编辑(
编辑
):(
更新
)}
去除
)
}
导出默认positem；

然后将标题作为道具传递给你的职位

比如说

 <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}/>

到（这使得标题被附加到值中，而您仍然可以编辑该值，请随意改进），它的行为有点错误或怪异，但它可以工作

 <Editable editField={title} editChange={editChange}/>

---

我认为您没有正确地传递标题状态。将这些添加到您的状态以初始化为空：

this.state ={
     isEditing:false,
     isEditingId:null,
     title: ""
}

一旦改变这个

  onChange = (e) => {
        e.preventDefault();
        this.setState({
            title: e.target.value
        })
    }

将项目发布到此

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;

const positem=（{title，id，removePost，createdAt，post\u content，username，editForm，isEditing，editChange}）=>{
返回(
{/*if-else-teneray操作符*/}
{i编辑(
): (
{title}
)}