React选项决策程序开发求助：无法实现输入、展示等核心功能

核心问题修正及功能实现 #

以下是针对你代码中的问题，以及补充随机选择、清除所有功能的完整解决方案：

1. Main 父组件（核心状态管理） #

实现状态更新的核心方法，并传递给子组件：

import React from "react";
import Header from "./Header";
import Display from "./Display";
import Remove from "./Remove";
import Add from "./AddOption";

export default class Main extends React.Component {
  constructor() {
    super();
    this.state = {
      arr: [],
    };
    // 绑定方法到当前实例
    this.handleAddOption = this.handleAddOption.bind(this);
    this.handleClearOptions = this.handleClearOptions.bind(this);
    this.handlePickRandom = this.handlePickRandom.bind(this);
  }

  // 添加新选项
  handleAddOption(option) {
    if (!option.trim()) return; // 过滤空输入
    this.setState(prevState => ({
      arr: [...prevState.arr, option.trim()]
    }));
  }

  // 清除所有选项
  handleClearOptions() {
    this.setState({ arr: [] });
  }

  // 随机选择一个选项
  handlePickRandom() {
    if (this.state.arr.length === 0) {
      alert("请先添加选项");
      return;
    }
    const randomIndex = Math.floor(Math.random() * this.state.arr.length);
    alert(`随机选择结果：${this.state.arr[randomIndex]}`);
  }

  render() {
    return (
      <div style={{ maxWidth: "600px", margin: "20px auto", padding: "0 20px" }}>
        <Header />
        <Display 
          data={this.state.arr} 
          handlePickRandom={this.handlePickRandom} 
        />
        <Add handleAddOption={this.handleAddOption} />
        <Remove handleClearOptions={this.handleClearOptions} hasOptions={this.state.arr.length > 0} />
      </div>
    );
  }
}

2. AddOption 组件（输入功能修复） #

添加input的name属性，移除冗余渲染：

import React from "react";

export default class Add extends React.PureComponent {
  constructor(props) {
    super(props);
    this.handleAddOption = this.handleAddOption.bind(this);
  }

  handleAddOption(event) {
    event.preventDefault();
    // 现在能正确获取输入值
    const option = event.target.option.value;
    if (option.trim()) {
      this.props.handleAddOption(option);
      event.target.option.value = ""; // 清空输入框
    }
  }

  render() {
    return (
      <form onSubmit={this.handleAddOption} style={{ margin: "20px 0" }}>
        <input 
          type="text" 
          name="option" 
          placeholder="Add Option" 
          style={{ padding: "8px", width: "70%", marginRight: "10px" }}
        />
        <button type="submit" style={{ padding: "8px 16px" }}>Add</button>
      </form>
    );
  }
}

3. Display 组件（展示+随机选择） #

添加随机选择按钮：

import React from "react";

export default class Display extends React.Component {
  render() {
    const { data, handlePickRandom } = this.props; 
    return (
      <div style={{ margin: "20px 0" }}>
        <h2>已添加选项:</h2>
        {data.length > 0 ? (
          <>
            <ul style={{ paddingLeft: "20px" }}>
              {data.map((item, index) => (
                <li key={index} style={{ margin: "8px 0" }}>{item}</li>
              ))}
            </ul>
            <button 
              onClick={handlePickRandom}
              style={{ padding: "8px 16px", marginTop: "10px" }}
            >
              随机选择一个选项
            </button>
          </>
        ) : (
          <p>还未添加任何选项，请先输入。</p>
        )}
      </div>
    );
  }
}

4. Remove 组件（清除所有功能） #

实现清除按钮：

import React from "react";

export default class Remove extends React.Component {
  render() {
    const { handleClearOptions, hasOptions } = this.props;
    return (
      <button
        onClick={handleClearOptions}
        disabled={!hasOptions}
        style={{ 
          padding: "8px 16px", 
          backgroundColor: "#dc3545", 
          color: "white", 
          border: "none",
          cursor: hasOptions ? "pointer" : "not-allowed",
          opacity: hasOptions ? 1 : 0.5
        }}
      >
        清除所有选项
      </button>
    );
  }
}

5. Header 组件（优化标题） #

import React from "react";

export default class Header extends React.Component {
  render() {
    return (
      <div style={{ borderBottom: "1px solid #eee", paddingBottom: "10px" }}>
        <h1>决策小助手</h1>
        <h2>输入选项，让我帮你随机选择</h2>
      </div>
    );
  }
}

功能说明 #

• 输入非空内容后点击Add，会添加到选项列表
• 点击「随机选择一个选项」会弹出随机选中的结果
• 存在选项时，「清除所有选项」按钮可点击，清空所有选项
• 空输入不会被添加到列表中

内容的提问来源于stack exchange，提问作者Rahul Deshmukh