Reactjs 无法在更改道具的输入字段中输入值

选择“编辑”时，我无法在输入字段中输入值，我认为这可能是onChange问题

我看了一些类似的东西，但代码似乎过时了，我使用的是受控组件，而不是引用

Editable.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.onChange}
            margin="normal"
            variant="outlined"/>

    </div>
)

export default Editable; 

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

PostList.js呈现post项目的列表

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 Editable from './Editable';
const Styles = {
    myPaper: {
        margin: '20px 0px',
        padding: '20px'
    }
}
class PostList extends Component{
    constructor(props){
        super(props);
        this.state ={
        }
    }
    // Return a new function. Otherwise the DeletePost action will be dispatch each
     // time the Component rerenders.
    removePost = (id) => () => {
        this.props.DeletePost(id);
    }
    onChange = (e) => {
        e.preventDefault();
        // maybe their is issue with it calling title from name in the editable 
        // component
        this.setState({
            [e.target.title]: e.target.value
        })
    }
    render(){
        const {posts, editForm, isEditing} = this.props;
        return (
            <div>
                {posts.map((post, i) => (
                    <Paper key={i} style={Styles.myPaper}>
                        <Typography variant="h6" component="h3">
                        {/* if else teneray operator */}
                        {isEditing ? (
                             <Editable editField={post.title} onChange={this.onChange}/>
                        ): (
                            <div>
                                {post.title}
                            </div>    
                        )}         
                        </Typography>
                        <Typography component="p">
                            {post.post_content}
                            <h5>
                                by: {post.username}</h5>
                            <Typography color="textSecondary">{moment(post.createdAt).calendar()}</Typography>
                        </Typography>
                        {!isEditing ? (
                            <Button variant="outlined" type="submit" onClick={editForm}>
                                Edit
                            </Button>
                        ):(
                            <Button variant="outlined" type="submit" onClick={editForm}>
                                Update
                            </Button>
                        )}
                        <Button
                            variant="outlined"
                            color="primary"
                            type="submit"
                            onClick={this.removePost(post.id)}>
                            Remove
                        </Button>
                    </Paper>
                ))}
            </div>
        )
    }
}
const mapDispatchToProps = (dispatch) => ({
    // Pass id to the DeletePost functions.
    DeletePost: (id) => dispatch(DeletePost(id))
});
export default connect(null, mapDispatchToProps)(PostList);

import React，{Component}来自'React'；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core/Button”导入按钮；
从“@material ui/core/Typography”导入排版；
从“力矩”中导入力矩；
从'react redux'导入{connect}；
从“../actions/”导入{DeletePost}；
从“./Editable”导入可编辑文件；
常量样式={
我的论文：{
保证金：“20px 0px”，
填充：“20px”
}
}
类PostList扩展组件{
建造师（道具）{
超级（道具）；
这个州={
}
}
//返回一个新函数。否则DeletePost操作将在每个
//对组件重新加载进行计时。
removePost=（id）=>（）=>{
this.props.DeletePost（id）；
}
onChange=（e）=>{
e、 预防默认值（）；
//也许他们的问题是，在可编辑文件中从名称中调用标题
//组成部分
这是我的国家({
[e.target.title]：e.target.value
})
}
render（）{
const{posts，editForm，isEditing}=this.props；
返回(
{posts.map（（post，i）=>(
{/*if-else-teneray操作符*/}
{i编辑(
): (
{post.title}
)}         
{post.post_content}
收件人：{post.username}
{时刻（post.createdAt.calendar（）}
{！我正在编辑(
编辑
):(
更新
)}
去除
))}
)
}
}
const mapDispatchToProps=（调度）=>({
//将id传递给DeletePost函数。
DeletePost：（id）=>调度（DeletePost（id））
});
导出默认连接（null，mapDispatchToProps）（PostList）；

Posts.js

import React, { Component } from 'react';
import PostList from './PostList';
import {connect} from 'react-redux';
import { withRouter, Redirect} from 'react-router-dom';
import {GetPosts} from '../actions/';
const Styles = {
    myPaper:{
      margin: '20px 0px',
      padding:'20px'
    }
    , 
    wrapper:{
      padding:'0px 60px'
    }
}
class Posts extends Component {
  state = {
    posts: [],
    loading: true,
    isEditing: false, 
  }
  async componentWillMount(){
    await this.props.GetPosts();
    this.setState({ loading: false })
    const reduxPosts = this.props.myPosts;
    const ourPosts = reduxPosts  
    console.log(reduxPosts); // shows posts line 35
  }

  formEditing = () => {

    if(this.state.isEditing){
      this.setState({
        isEditing: false
      });
    }

    else{
      this.setState({
        isEditing:true
      })
    }
  }


  render() {
    const {loading} = this.state;
    const { myPosts} = this.props
    if (!this.props.isAuthenticated) {
      return (<Redirect to='/signIn' />);
    }
    if(loading){
      return "loading..."
    }
    return (
      <div className="App" style={Styles.wrapper}>
        <h1> Posts </h1>
        <PostList  isEditing={this.state.isEditing} editForm={this.formEditing} posts={myPosts}/>
      </div>
    );
  }
}
const mapStateToProps = (state) => ({
  isAuthenticated: state.user.isAuthenticated,
  myPosts: state.post.posts
})
const mapDispatchToProps = (dispatch, state) => ({
  GetPosts: () => dispatch( GetPosts())
});
export default withRouter(connect(mapStateToProps,mapDispatchToProps)(Posts));

import React，{Component}来自'React'；
从“/PostList”导入PostList；
从'react redux'导入{connect}；
从“react router dom”导入{withRouter，Redirect}；
从“../actions/”导入{GetPosts}；
常量样式={
我的论文：{
保证金：“20px 0px”，
填充：'20px'
}
, 
包装器：{
填充：“0px 60px”
}
}
类Posts扩展组件{
状态={
员额：[]，
加载：对，
i编辑：错，
}
异步组件willmount（）{
等待此消息。props.GetPosts（）；
this.setState（{loading:false}）
const reduxPosts=this.props.myPosts；
const ourPosts=reduxPosts
log（reduxPosts）；//显示posts第35行
}
formEditing=（）=>{
if（this.state.isEditing）{
这是我的国家({
i编辑：错误
});
}
否则{
这是我的国家({
我编辑：对
})
}
}
render（）{
const{loading}=this.state；
const{myPosts}=this.props
如果（！this.props.isAuthenticated）{
返回（）；
}
如果（装载）{
返回“正在加载…”
}
返回(
帖子
);
}
}
常量mapStateToProps=（状态）=>({
isAuthenticated:state.user.isAuthenticated，
我的帖子：state.post.posts
})
const mapDispatchToProps=（调度，状态）=>({
GetPosts:（）=>调度（GetPosts（））
});
使用路由器导出默认值（connect（mapStateToProps，mapDispatchToProps）（Posts））；

您正在使用属性

this.props.posts[index].title设置输入值，但您正在通过
PostList
s状态处理更改

您应该将
onChange
函数委托给将列表传递给
PostList
组件的组件，或者通过
PostList
s状态存储和更新列表。
您正在使用属性
this.props.posts[index]设置输入值.title
但您正在通过
PostList
s状态处理更改

您应该将
onChange
功能委托给将列表传递给
PostList
组件的组件，或者通过
PostList
s状态存储和更新列表。
您需要传递在change功能中设置的值

onChange = (e) => {
    e.preventDefault();
    // maybe their is issue with it calling title from name in the editable 
    // component
    this.setState({
        [e.target.title]: e.target.value
    })
}

您正在设置编辑字段的状态。在引用可编辑对象时，必须再次引用该值

<Editable editField={this.state.[here should be whatever e.target.title was for editable change event] } onChange={this.onChange}/>



在可编辑组件中，您可以将值设置为prop edit字段

 <TextField
            id="outlined-name"
            label="Title"
            style={{width: 560}}
            name="title"
            **value={props.editField}**
            onChange={props.onChange}
            margin="normal"
            variant="outlined"/>



希望对您有所帮助
您需要传递更改函数中设置的值

onChange = (e) => {
    e.preventDefault();
    // maybe their is issue with it calling title from name in the editable 
    // component
    this.setState({
        [e.target.title]: e.target.value
    })
}

您正在设置编辑字段的状态。在引用可编辑对象时，必须再次引用该值

<Editable editField={this.state.[here should be whatever e.target.title was for editable change event] } onChange={this.onChange}/>



在可编辑组件中