在无状态React组件中引用数据

Question

我使用内部变量制作了一个无状态组件来引用输入，如下所示。 一切正常。

const MyStatelessComp = ({ team, teamProgress, onSet, editing, enableEdit }) => {
  let input

  return (
    <div>
      <div className="team__goal-target_header" >Team's Savings Target</div>
      <div className="team__goal-target_value" >
        M$
        <input
          ref={ el => input = el }
          style={{width: '75px', border: 'none'}}
          onChange={() => onSet({teamId: team.id, goalValue: parseInt(input.value, 10) || 0}) }
        />
        <div
          ref={ el => input }
          style={{
            display: !input || (!isNaN(parseFloat(input.value)) && isFinite(input.value)) ? 'none' : 'block'
          }}
        >Must be numeric</div>
      </div>
    </div>
  )
}

我要验证输入并显示通知， Must be numeric是不能转换为Must be numeric的任何内容，请输入我的输入字段。 但是，这不起作用。 如何在“警告div”的上下文中使input引用输入的值？

意识到这不是使用无状态组件的非常规方法，但是它将为我省去很多麻烦。

谢谢。

Answer 1

当他可以成为简单的有状态组件时，为什么要使用无状态组件？

 class App extends Component { constructor(props) { super(props); this.state = { value: null }; this.handleChange = this.handleChange.bind(this); } handleChange(event) { this.setState({ value: event.target.value }); } render() { const isNumber = !isNaN(this.state.value); return ( <div> <div className="team__goal-target_header">Team's Savings Target</div> <div className="team__goal-target_value"> M$ <input style={{ width: "75px", border: "none" }} onChange={this.handleChange} value={this.state.value} /> {isNumber ? "" : <div>Must be numeric</div>} </div> </div> ); } } 

您还可以切换div内容或创建新的警报组件并切换该组件。