渲染后无法刷新所选值

Question

我正在尝试自动完成，并且渲染后无法刷新所选值。 我在：

上添加了一个示例

https://codesandbox.io/s/test-material-ui-autocomplete-700nh?fontsize=14&hidenavigation=1&theme=dark

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 }]
    };
  }

  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: "2.The Shawshank Redemption", year: 1994 }]
    }));
  }

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

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

当我单击按钮时，自动完成列表会刷新，但所选选项不会更改。我需要通过状态修改对所选选项进行哪些更改？ 非常感谢您的帮助

Answer 1

您需要为自动完成提供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;

我还修改了您的状态对象，并添加了movies键