3

我开始学习它，但找不到解决方案 -> 我有一个输入，当值超过 20 个字符时，我希望显示一个工具提示，其中包含输入的完整值。我已经全部建成并且可以正常工作。问题是我得到一个最大的调用堆栈错误，因为每次按键都会改变状态 - 我不确定最好/正确的方法......任何帮助将不胜感激

请参阅下面的代码，这是笔

console.clear();

class Input extends React.Component {

  render(){
    return(
      <div>
        <input
          className="main-input"
          onChange={this.props.onChange}
          placeholder={"Tell me something"}
          />
       </div>
    )
  };

}

class Tooltip extends React.Component {

  render(){
    return(
      <div
        className="tooltip"
        data-status={this.props.isShowing}>
        <p>{this.props.TooltipValue}</p>
      </div>
    )
  }
}

class App extends React.Component {
  constructor(){
    super();
    this.state = {
      message: '',
      isShowing: false
    }
  }

  onChange(e) {
      this.setState({
        message: e.target.value
      });
    }

  render(){
    const inputVal = (this.state.message.length);
    if(inputVal >= 20){
      this.setState({isShowing: true})
    } 
    // else {
    //   this.setState({isShowing: false})
    // }

    return(
      <div className="container">
        <Tooltip
          TooltipValue={this.state.message}
          isShowing={this.state.isShowing}
        />
        <Input onChange={this.onChange.bind(this)}/>
      </div>
    )
  }

}


ReactDOM.render(
  <App />,
  document.getElementById('Main')
)
4

2 回答 2

2

为什么setState在render函数中使用时最大调用堆栈错误？

因为当我们这样做的时候setState，React会触发组件的重新渲染，如果你在setstate里面做render then after setState，组件会重新渲染，再找setState一遍render，就会变成死循环，所以千万不要setState在里面做任何的render方法。

检查此答案setState以获取有关行为的更多详细信息。

与其将 check 放在render方法内部，不如将其放在内部onChange方法中，如下所示：

onChange(e) {
    const inputVal = e.target.value;
    this.setState({
        message: inputVal,
        isShowing : inputVal.length > 20 ? true : false
    });
}

并删除这些行：

if(inputVal >= 20){
    this.setState({isShowing: true})
} 
// else {
//   this.setState({isShowing: false})
// }

或者由于 的显示Tooltip取决于input元素的值，您可以避免额外的变量并直接使用Tooltip属性检查输入元素的长度isShowing，如下所示：

<Tooltip
    TooltipValue={this.state.message}
    isShowing={this.state.message.length >= 20}
/>
于 2017-04-23T16:44:06.010 回答
2

无需使用单独的状态，tooltip因为它已经取决于状态值，您可以这样做

<Tooltip
      TooltipValue={this.state.message}
      isShowing={this.state.message.length > 20}  >

此外，由于您在 in 中使用setState，render()您会收到一个错误，因为setState触发重新渲染，因此一旦您if-condition变为真，就会开始一个 infine 循环。

编解码器

于 2017-04-23T16:48:04.547 回答