Reactjs 渲染后无法刷新选定值

我正在尝试自动完成，渲染后无法刷新选定值。 我添加了一个关于以下内容的示例：

从“React”导入React；
从“@material ui/core/TextField”导入TextField；
从“@material ui/lab/Autocomplete”导入自动完成；
从“@物料界面/核心/按钮”导入按钮；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.handleClick=this.handleClick.bind（this）；
此.state={
托普托肖：[
{标题：“1.肖申克的救赎”，年份：1994}，
{标题：“1.教父”，年份：1972}，
{标题：“1.教父：第二部分”，年份：1974}，
{标题：“1.黑暗骑士”，年份：2008}，
{标题：“1.12愤怒的男人”，年份：1957}
],
topToSelect:[{标题：“1.肖申克的救赎”，年份：1994}]
};
}
handleClick（）{
this.setState（state=>({
托普托肖：[
{标题：“2.肖申克的救赎”，年份：1994}，
{标题：“2.教父”，年份：1972}，
{标题：“2.教父：第二部分”，年份：1974}，
{标题：“2.黑暗骑士”，年份：2008}，
{标题：“2.12愤怒的男人”，年份：1957}
],
topToSelect:[{标题：“2.肖申克的救赎”，年份：1994}]
}));
}
render（）{
返回(
改变
选项.title}
defaultValue={this.state.topToSelect}
renderInput={params=>(
)}
/>
);
}
}
App.defaultProps={}；
导出默认应用程序；

当我点击按钮时，自动完成列表被刷新，但选择的选项并没有改变。我需要通过状态修改对所选选项进行哪些更改？

---

非常感谢您的帮助

您需要提供

value

和

onChange

道具来自动完成：

import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import Button from "@material-ui/core/Button";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);

    this.state = {
      topToShow: [
        { title: "1.The Shawshank Redemption", year: 1994 },
        { title: "1.The Godfather", year: 1972 },
        { title: "1.The Godfather: Part II", year: 1974 },
        { title: "1.The Dark Knight", year: 2008 },
        { title: "1.12 Angry Men", year: 1957 }
      ],
      topToSelect: [{ title: "1.The Shawshank Redemption", year: 1994 }],
      movies: [{ title: "1.The Shawshank Redemption", year: 1994 }],
    };
  }

  handleClick() {
    this.setState(state => ({
      topToShow: [
        { title: "2.The Shawshank Redemption", year: 1994 },
        { title: "2.The Godfather", year: 1972 },
        { title: "2.The Godfather: Part II", year: 1974 },
        { title: "2.The Dark Knight", year: 2008 },
        { title: "2.12 Angry Men", year: 1957 }
      ],
      topToSelect: [{ title: "2The Shawshank Redemption", year: 1994 }],
      movies: [{ title: "2The Shawshank Redemption", year: 1994 }]
    }));
  }

  handleChange = (e, values) => {
    this.setState({
      movies: values
    })
  }

  render() {
    console.log('state', this.state)
    return (
      <div>
        <Button variant="contained" onClick={this.handleClick}>
          Change
        </Button>

        <Autocomplete
          onChange={this.handleChange}
          value={this.state.movies}
          multiple
          id="tags-standard"
          options={this.state.topToShow}
          getOptionLabel={option => option.title}
          defaultValue={this.state.topToSelect}
          renderInput={params => (
            <TextField
              {...params}
              variant="standard"
              label="Multiple values"
              placeholder="Favorites"
              margin="normal"
              fullWidth
            />
          )}
        />
      </div>
    );
  }
}

App.defaultProps = {};

export default App;

从“React”导入React；
从“@material ui/core/TextField”导入TextField；
从“@material ui/lab/Autocomplete”导入自动完成；
从“@物料界面/核心/按钮”导入按钮；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.handleClick=this.handleClick.bind（this）；
此.state={
托普托肖：[
{标题：“1.肖申克的救赎”，年份：1994}，
{标题：“1.教父”，年份：1972}，
{标题：“1.教父：第二部分”，年份：1974}，
{标题：“1.黑暗骑士”，年份：2008}，
{标题：“1.12愤怒的男人”，年份：1957}
],
topToSelect:[{标题：“1.肖申克的救赎”，年份：1994}]，
电影：[{片名：“1.肖申克的救赎”，年份：1994}]，
};
}
handleClick（）{
this.setState（state=>({
托普托肖：[
{标题：“2.肖申克的救赎”，年份：1994}，
{标题：“2.教父”，年份：1972}，
{标题：“2.教父：第二部分”，年份：1974}，
{标题：“2.黑暗骑士”，年份：2008}，
{标题：“2.12愤怒的男人”，年份：1957}
],
topToSelect:[{标题：“肖申克的救赎”，年份：1994}]，
电影：[{片名：《肖申克的救赎》，年份：1994}]
}));
}
handleChange=（e，值）=>{
这是我的国家({
电影：价值观
})
}
render（）{
console.log（'state'，this.state）
返回(
改变
您需要在此处发布问题，而不是指向任何第三方网站的链接。
import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import Button from "@material-ui/core/Button";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);

    this.state = {
      topToShow: [
        { title: "1.The Shawshank Redemption", year: 1994 },
        { title: "1.The Godfather", year: 1972 },
        { title: "1.The Godfather: Part II", year: 1974 },
        { title: "1.The Dark Knight", year: 2008 },
        { title: "1.12 Angry Men", year: 1957 }
      ],
      topToSelect: [{ title: "1.The Shawshank Redemption", year: 1994 }],
      movies: [{ title: "1.The Shawshank Redemption", year: 1994 }],
    };
  }

  handleClick() {
    this.setState(state => ({
      topToShow: [
        { title: "2.The Shawshank Redemption", year: 1994 },
        { title: "2.The Godfather", year: 1972 },
        { title: "2.The Godfather: Part II", year: 1974 },
        { title: "2.The Dark Knight", year: 2008 },
        { title: "2.12 Angry Men", year: 1957 }
      ],
      topToSelect: [{ title: "2The Shawshank Redemption", year: 1994 }],
      movies: [{ title: "2The Shawshank Redemption", year: 1994 }]
    }));
  }

  handleChange = (e, values) => {
    this.setState({
      movies: values
    })
  }

  render() {
    console.log('state', this.state)
    return (
      <div>
        <Button variant="contained" onClick={this.handleClick}>
          Change
        </Button>

        <Autocomplete
          onChange={this.handleChange}
          value={this.state.movies}
          multiple
          id="tags-standard"
          options={this.state.topToShow}
          getOptionLabel={option => option.title}
          defaultValue={this.state.topToSelect}
          renderInput={params => (
            <TextField
              {...params}
              variant="standard"
              label="Multiple values"
              placeholder="Favorites"
              margin="normal"
              fullWidth
            />
          )}
        />
      </div>
    );
  }
}

App.defaultProps = {};

export default App;