单击“搜索”按钮后如何使搜索栏呈现更改？

Question

我目前正试图弄清楚如何解决这个问题：

如您所见，搜索栏值被初始化为“TSLA”，但是，不是用 AAPL 数据小部件替换 TSLA 数据小部件，而是在 TSLA 小部件下方显示了一个新的小部件“A”、“AA”、“ AAP”，最后是“AAPL”，当我在搜索栏中输入代码的每个字母时，呈现一个新的小部件。

这是搜索栏的代码，其中 state 变量“值”是我传递给小部件的内容：

class OneStockData extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        value: 'TSLA',
        clicked: false
    }

    this.handleChange = this.handleChange.bind(this)
}

toggleBtnHandler = () => {
    return this.setState({
        clicked:!this.state.clicked
    })
}

handleChange (event) {
    this.setState({value: event.target.value })
}


render() {
    const styles = ['button'];
            let text = 'Search';
    return (
        <div>
            <Container fluid>
                <Row>
                    <Card>
                        <CardTitle className="text-uppercase text-muted h6 mb-0">Enter Stock Ticker: </CardTitle>
                        <input type="text" value={this.state.value} onChange={this.handleChange} />
                        <div>
                        <button className="button" onClick={this.toggleBtnHandler}>{text}</button>
                        </div>
                    </Card>
                    <Card>
                        <SSIWidget value = {this.state.value}/>
                    </Card>
                </Row >

这是 SSIWidget 中的代码：

class SSIWidget extends  React.Component {
constructor(props){
    super(props);
}

AddWidget = () => {
    const script = document.createElement('script');
    script.src ="https://s3.tradingview.com/external-embedding/embed-widget-symbol-info.js";
    script.async = true;
    script.innerHTML = JSON.stringify(
        {
            "symbol": this.props.value,
            "width": 1000,
            "locale": "en",
            "colorTheme": "light",
            "isTransparent": false
        }
    )
    document.getElementById("myContainer6").appendChild(script); 
}

componentDidMount() {
    this.AddWidget();
}

componentDidUpdate(prevProps) {
    if(prevProps.value !== this.props.value) {
        this.AddWidget();
    }
}

render() {

    return(
        <div id="myContainer6">
            <div className="tradingview-widget-container">
            <div className="tradingview-widget-container__widget">
                </div>
            </div>
        </div>
    );
}
}

有2个问题：

1. 当输入代码的每个字母时，它会呈现一个新的“SSIWidget”，并将它们堆叠在彼此的下方。 这是一个很大的禁忌，我希望显示 TSLA 数据的小部件是唯一的 SSIWidget，并且在我单击“搜索”后数据被每个新代码替换

2. 当我清除搜索栏时，我希望小部件显示“TSLA”的值，因为它被初始化为。

我在“onClick”上尝试了不同的搜索栏和一些资源，但还没有找到解决我的问题的方法。 这里有人可以指出我正确的方向吗？

Answer 1

维护另一个 state 说searchedValue并在单击搜索按钮时更新它。

重构代码

class OneStockData extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "TSLA",
      searchedValue: "TSLA", //<------- here
      clicked: false,
    };

    this.handleChange = this.handleChange.bind(this);
  }

  toggleBtnHandler = () => {
    return this.setState({
      clicked: !this.state.clicked,
      searchedValue: this.state.value === "" ? "TSLA" : this.state.value,  //<------- here
    });
  };

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  render() {
    const styles = ["button"];
    let text = "Search";
    return (
      <div>
        <Container fluid>
          <Row>
            <Card>
              <CardTitle className="text-uppercase text-muted h6 mb-0">
                Enter Stock Ticker:{" "}
              </CardTitle>
              <input
                type="text"
                value={this.state.value}
                onChange={this.handleChange}
              />
              <div>
                <button className="button" onClick={this.toggleBtnHandler}>
                  {text}
                </button>
              </div>
            </Card>
            <Card>
              <SSIWidget value={this.state.searchedValue} /> //<------- here
            </Card>
          </Row>
        </Container>
      </div>
    );
  }
}

编辑：根据评论跟进 qn。

您正在附加孩子。 在追加之前，您需要清除子项。

AddWidget = () => {

    const script = document.createElement('script');
    script.src ="https://s3.tradingview.com/external-embedding/embed-widget-symbol-info.js";
    script.async = true;
    script.innerHTML = JSON.stringify(
        {
            "symbol": this.props.value,
            "width": 1000,
            "locale": "en",
            "colorTheme": "light",
            "isTransparent": false
        }
    )
    document.getElementById("myContainer6").innerHTML = ''; //<----here
    document.getElementById("myContainer6").appendChild(script); 
}