代码之家 › 专栏 › 技术社区 › DannyD

如何从一个react组件获取输入并将输入的长度传递给另一个react组件

reactjs javascript

DannyD · 技术社区 · 4 年前

我有一个文本区域,我想在这里举行一次onChange活动。输入文本时,我想计算输入的字符串的长度,然后将其传递给另一个react组件以显示字符计数。但是,我在将数据传递到react组件时遇到了问题。

我总共有3种反应成分:

分段计算器:这是我的完整应用程序
InputBox:这是用户输入字符串的地方
CharacterBox:这是我想显示我的角色计数的地方

以下是我目前掌握的情况:

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

    this.state = {
      value: null,
    }
  }
  
  render() {
    return (
      <label>
        Input:
        <textarea
          type="text"
          value={this.state.value}
          onChange={() => this.props.onChange(this.state.value)}
        />
      </label>
    );
  }
}

class CharacterBox extends React.Component {
  render() {
    return (
      <div>Character Count:{this.props.charCount}</div>
    )
  }
}

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

    this.state = {
      inputChars: null,
    };
  }

  handleChange(value) {

    this.setState({
      inputChars: value,
      inputCharsLength: value.length,
    });
  }

  render() {
    let charaterCount = this.state.inputCharsLength;

    return (
      <div className="segment-calculator">
        <div className="input-box">
          <InputBox onChange={() => this.handleChange()} />
        </div>
        <div className="characters">
          <CharacterBox charCount={charaterCount}/>
        </div>
      </div>
    );
  }
}

1 回复 | 直到 4 年前

Drew Reese 4 年前

您有一个半受控输入,这意味着它有本地状态,但您不更新它。

从父级传递输入状态。

InputBox-传递 value 支撑至 textarea 要素通过 onChange 事件的目标值 onChange公司 回调道具。

class InputBox extends React.Component {
  render() {
    return (
      <label>
        Input:
        <textarea
          type="text"
          value={this.props.value}
          onChange={(e) => this.props.onChange(e.target.value)}
        />
      </label>
    );
  }
}

分段计算器-通过 this.state.inputChars 到 InputBox 价值 道具输入长度是派生状态,因此没有理由将其存储在状态中。

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

    this.state = {
      inputChars:'',
    };
  }

  handleChange = (value) => {
    this.setState({
      inputChars: value,
    });
  }

  render() {
    const { inputChars } = this.state;

    return (
      <div className="segment-calculator">
        <div className="input-box">
          <InputBox
            onChange={this.handleChange}
            value={inputChars}
          />
        </div>
        <div className="characters">
          <CharacterBox charCount={inputChars.length}/>
        </div>
      </div>
    );
  }
}

class InputBox extends React.Component {
  render() {
    return (
      <label>
        Input:
        <textarea
          type="text"
          value={this.props.value}
          onChange={(e) => this.props.onChange(e.target.value)}
        />
      </label>
    );
  }
}

class CharacterBox extends React.Component {
  render() {
    return (
      <div>Character Count:{this.props.charCount}</div>
    )
  }
}

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

    this.state = {
      inputChars: '',
    };
  }

  handleChange = (value) => {
    this.setState({
      inputChars: value,
    });
  }

  render() {
    const { inputChars } = this.state;

    return (
      <div className="segment-calculator">
        <div className="input-box">
          <InputBox
            onChange={this.handleChange}
            value={inputChars}
          />
        </div>
        <div className="characters">
          <CharacterBox charCount={inputChars.length}/>
        </div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <SegmentCalculator />,
  rootElement
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root" />