javascript - react : Updating form on button click

Question

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

我想做的是:

1. 用户点击子组件 keyboard.jsx 上的其中一个按钮
2. 将关联的字符传递给 App.js(这有效，通过回调函数)
3. 将新字符传递给 App.js 后，通过将新值传递给另一个子组件 TextBox.jsx 来更新它。

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

这是我的代码:

键盘.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;

文本框.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

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

在这种特殊情况下，您应该实现双向绑定(bind)。它会像这样工作:

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