Question

我有三个组件，App，TextBox和Keyboard。

我想做的是：

用户单击子组件keyboard.jsx上的按钮之一
将关联的字符传递给App.js（这可以通过回调函数来实现）
一旦将新字符传递给App.js，请通过向其传递新值来更新另一个子组件TextBox.jsx。

但是，我陷入了第3步。我已经将值传递给App.js，但我不知道如何将其传递给子组件Keyboard.jsx，因此我可以更新输入表单。 / p>

这是我的代码：

keyboard.jsx

import React, { Component } from "react";

class Keyboard extends Component {
  state = {
    current: null,
    keys: ["á", "é", "í", "ñ", "ó", "ú", "ü"]
  };

  render() {
    return (
      <div>
        <table>
          <tbody>
            {Object(
              this.state.keys.map(key => {
                return (
                  <td>
                    <button
                      onClick={() => {
                        this.solve(key, this.props.handler);
                      }}
                    >
                      {key}
                    </button>
                  </td>
                );
              })
            )}
          </tbody>
        </table>
      </div>
    );
  }
  solve = (char, callback) => {
    this.setState({ current: char });
    callback(char);
    return;
  };
}

export default Keyboard;

textbox.jsx

import React, { Component } from "react";

class TextBox extends Component {
  state = { equation: null };
  render() {
    return (
      <div>
        <form onSubmit={this.mySubmitHandler}>
          <input
            size="35"
            type="text"
            name="equation"
            onChange={this.handleInputChange}
          />
        </form>
      </div>
    );
  }
  handleInputChange = event => {
    event.preventDefault();
    this.setState({
      [event.target.name]: event.target.value
    });
  };

  mySubmitHandler = event => {
    event.preventDefault();
    this.setState({ equation: event.target.value });
    alert("You are submitting " + this.state.equation);
    console.log(this.state.equation);
  };
}

export default TextBox;

App.js

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import Keyboard from "./components/keyboard";
import TextBox from "./components/textbox";

class App extends Component {
  state = { character: null };
  render() {
    return (
      <div>
        <TextBox />
        <Keyboard handler={this.handler} />
      </div>
    );
  }

  handler = arg => {
    console.log(arg);
  };
}

export default App;

Answer 1

这可以通过将状态变量字符this.state.character传递给Textbox中的子组件App.js来实现，而this.handler中的App.js方法应该更新this.state.character。

class App extends Component {
  state = { character: null };
  render() {
    return (
      <div>
        <TextBox character={this.state.character} />
        <Keyboard handler={this.handler} />
      </div>
    );
  }

  handler = arg => this.setState({ character: arg });
}

Answer 2

我看到您正在尝试做的是使按钮带有某些特殊字母，您可以单击这些按钮以将其插入到单独组件中的输入字段中。

在这种情况下，您应该实现双向绑定。它将像这样工作：

class Keyboard extends React.Component {
  state = {
    current: null,
    keys: ["á", "é", "í", "ñ", "ó", "ú", "ü"]
  };

  render() {
    return (
      <div>
        <table>
          <tbody>
            {Object(
              this.state.keys.map(key => {
                return (
                  <td>
                    <button
                      onClick={() => {
                        this.solve(key, this.props.handler);
                      }}
                    >
                      {key}
                    </button>
                  </td>
                );
              })
            )}
          </tbody>
        </table>
      </div>
    );
  }
  solve = (char, callback) => {
    this.setState({ current: char });
    callback(char);
    return;
  };
}

class TextBox extends React.Component {
  render() {
    return (
      <div>
        <form onSubmit={this.mySubmitHandler}>
          <input
            value={this.props.equation}
            size="35"
            type="text"
            name="equation"
            onChange={this.handleInputChange}
          />
        </form>
      </div>
    );
  }
  handleInputChange = event => {
    event.preventDefault();
    this.setState({
      [event.target.name]: event.target.value
    });
    this.props.equationChange(event.target.value)
  };

  mySubmitHandler = event => {
    event.preventDefault();
    alert("You are submitting " + this.props.equation);
    console.log(this.props.equation);
  };
}

class App extends React.Component {
  state = { character: null };
  render() {
    return (
      <div>
        <TextBox equationChange={this.equationChange} equation={this.state.equation} />
        <Keyboard handler={this.handler} />
      </div>
    );
  }

  handler = arg => {
    console.log(arg);
    this.setState({ equation: (this.state.equation || '') + arg
                  });
  };

  equationChange = equation => {
    this.setState({ equation });
  }
}

React.render(<App />, document.getElementById('app'));

有效的代笔：https://codepen.io/leo-melin/pen/mdyEvwQ

Answer 3

您可以将此this.state.character作为道具传递到文本框，然后在textbox.jsx中从道具中提取字符，即const {character} = this.props，然后在文本框中显示它。

反应：点击按钮即可更新表单

3 个答案: