Question

如下所示的父组件我在编辑 ExpertiseEdit

时将状态设置为 ContentLeft

class Dashboard extends React.Component {
  state = {
    name: 'Your Name',
    title: 'job Title',
    email: 'Your Email',
    experience: 'Your Experience',

    languages: 'languages that used',
    tools: 'tools that used',
    knowledgeareas: 'your knowledge areas'
  };


  handleChange = event => {
    this.setState({
      [event.target.name]: event.target.value,
      [event.target.title]: event.target.value,
      [event.target.email]: event.target.value,
      [event.target.experience]: event.target.value
    })
  }

  handleChangeExpertise = event => {
    this.setState({
      [event.target.languages]: event.target.value,
      [event.target.tools]: event.target.value,
      [event.target.knowledgeareas]: event.target.value
    })
  }

  render() {
    var gridStyle = {
      padding: '10px',
      height: '300px',
      resize: 'auto',
      overflow: 'auto'
    }
    return (
      <div>
        <Grid container>
          <ItemGrid xs={6}>
              <ProfileHeader {...this.state}/>
              <Grid container>
                <Grid item xs={6}>
                  <ContentLeft {...this.state}/>
                </Grid>
              </Grid>
          </ItemGrid>
          <ItemGrid xs={6}>
            <HeaderEdit onChange={this.handleChange} {...this.state} />
            <ExpertiseEdit onChange={this.handleChangeExpertise} {...this.state} />
          </ItemGrid>
        </Grid>
      </div>
    );
  }
}

ExpertiseEdit 组件如下

class ExpertiseEdit extends React.Component {

  render() {
    const { classes } = this.props;

    return (
      <div>
        <Typography variant="headline">Expertise Edit</Typography>
        <FormControl fullWidth className={classes.formControl}>
          <InputLabel htmlFor="languages-simple">Languages</InputLabel>
          <Input name="languages" value={this.props.languages} id="languages-simple" onChange={this.props.onChange}/>
        </FormControl><br></br>
        <FormControl fullWidth className={classes.formControl}>
          <InputLabel htmlFor="tools-simple">Development Tools</InputLabel>
          <Input name="tools" id="tools-simple" value={this.props.tools} onChange={this.props.onChange}/>
        </FormControl><br></br>
        <FormControl fullWidth className={classes.formControl}>
          <InputLabel htmlFor="knowledgeareas-simple">Knowledge Areas</InputLabel>
          <Input name="knowledgeareas" id="knowledgeareas-simple" value={this.props.knowledgeareas} onChange={this.props.onChange}/> 
        </FormControl><br></br>
      </div>
    );
  }
}

ContentLeft 组件如下

function ContentLeft(props) {
  const { classes } = props;
  return (
    <div>
        <Typography variant="subheading" color="textSecondary">
        {props.languages}
        </Typography>
        <Typography variant="subheading" color="textSecondary">
        {props.tools}
        </Typography>
        <Typography variant="subheading" color="textSecondary">
        {props.knowledgeareas}
        </Typography>
    </div>
  );
}

为什么在我更改编辑文本时它没有改变其他组件（ ProfileHeader和HeaderEdit ）的工作原理如下

我做错了什么请帮助我

Answer 1

由于输入元素的name属性分别具有语言，工具和知识区域的值，因此您需要将handleChangeExpertise函数更新为以下状态才能正确更新，

  handleChangeExpertise = event => {
    this.setState({
      [event.target.name]: event.target.value
    })
  }

无法更改React js

1 个答案: