javascript - 如果选择特定单选按钮，则显示输入框

Question

目标：
如果您在收音机中选择绿色。输入框文本将出现在单选输入组下方。如果单击另一个单选按钮，它将不会显示。

如果您在收音机中选择蓝色。输入框文本将出现在单选输入组下方。如果单击另一个单选按钮，它将不会显示。

问题：
我不知道如何解决它。你会怎么解决？

信息：
* reactjs 中的新手

Stackblitz：
https ://stackblitz.com/edit/react-rpncls ？

谢谢！

---

import React from 'react';
import './style.css';

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      color: 'red'
    };

    this.onRadioChange = this.onRadioChange.bind(this);
  }

  onRadioChange = e => {
    this.setState({
      color: e.target.value
    });
  };

  render() {
    return (
      <div className="App">
        <form onSubmit={this.onSubmit}>
          <strong>Select Color:</strong>

          <ul>
            <li>
              <label>
                <input
                  type="radio"
                  value="red"
                  checked={this.state.color === 'red'}
                  onChange={this.onRadioChange}
                />
                <span>Red</span>
              </label>
            </li>

            <li>
              <label>
                <input
                  type="radio"
                  value="green"
                  checked={this.state.color === 'green'}
                  onChange={this.onRadioChange}
                />
                <span>Green</span>
              </label>
            </li>

            <li>
              <label>
                <input
                  type="radio"
                  value="blue"
                  checked={this.state.color === 'blue'}
                  onChange={this.onRadioChange}
                />
                <span>Blue</span>
              </label>
            </li>

            <li>
              <label>
                <input
                  type="radio"
                  value="orange"
                  checked={this.state.color === 'orange'}
                  onChange={this.onRadioChange}
                />
                <span>Ornage</span>
              </label>
            </li>

            <li>
              <label>
                <input
                  type="radio"
                  value="purple"
                  checked={this.state.color === 'purple'}
                  onChange={this.onRadioChange}
                />
                <span>Purple</span>
              </label>
            </li>
          </ul>

          <button type="submit">Choose Color</button>
        </form>
      </div>
    );
  }
}

标签： javascripthtmlreactjs

Answer 1

您可以根据所选颜色有条件地渲染文本框。

应用程序.js：

import React from 'react';
import './style.css';

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      color: 'red'
    };

    this.onRadioChange = this.onRadioChange.bind(this);
  }

  onRadioChange = e => {
    this.setState({
      color: e.target.value
    });
  };

  textBoxVisible = () => {
    return (this.state.color==="green" || this.state.color==="blue");
  }

  render() {
    return (
      <div className="App">
        <form onSubmit={this.onSubmit}>
          <strong>Select Color:</strong>

          <ul>
            <li>
              <label>
                <input
                  type="radio"
                  value="red"
                  checked={this.state.color === 'red'}
                  onChange={this.onRadioChange}
                />
                <span>Red</span>
              </label>
            </li>

            <li>
              <label>
                <input
                  type="radio"
                  value="green"
                  checked={this.state.color === 'green'}
                  onChange={this.onRadioChange}
                />
                <span>Green</span>
              </label>
            </li>

            <li>
              <label>
                <input
                  type="radio"
                  value="blue"
                  checked={this.state.color === 'blue'}
                  onChange={this.onRadioChange}
                />
                <span>Blue</span>
              </label>
            </li>

            <li>
              <label>
                <input
                  type="radio"
                  value="orange"
                  checked={this.state.color === 'orange'}
                  onChange={this.onRadioChange}
                />
                <span>Ornage</span>
              </label>
            </li>

            <li>
              <label>
                <input
                  type="radio"
                  value="purple"
                  checked={this.state.color === 'purple'}
                  onChange={this.onRadioChange}
                />
                <span>Purple</span>
              </label>
            </li>
          </ul>
          {this.textBoxVisible() && <input type="text"/>}
          <button type="submit" class="submitButton">Choose Color</button>
        </form>
      </div>
    );
  }
}

要确保文本框和提交按钮不在同一行，请将其添加到 style.css：

.submitButton{
  display:block;
}