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任何无法转换为数字的内容都会输入到我的输入字段中。然而，这不起作用。如何在“警告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内容或创建新的警报组件并切换此组件。

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

1 个答案: