javascript - 下拉更改事件通过 api 调用与状态、无序列表和按钮可见性绑定(bind)

Question

我有一个组件，它有一个下拉菜单、一个按钮和一个无序列表，我确实将更改事件上的下拉菜单绑定(bind)到组件中的一个函数，在该函数中我试图用所选项目分配状态，但由于某种原因分配无法正常工作，我试图将所选项目值和分配的值都提醒到状态中，但由于某种原因，状态值的警报正确进入，它显示了先前选择的项目值。我是不是错过了什么？

1. 我想根据所选项目的值更改下载按钮的可见性，例如，所选项目的值为“”或空字符串，则按钮不应该可见。

2. changeEvent 的函数应该调用一个 api 方法，该方法获取所选社区的值，该方法返回下拉列表中所选社区的集合。如果此 api 调用未获取值或集合中没有任何项目，则下载按钮应该不可见，如果有项目则可见。

3. 对于第 # 2s api 调用中的每个项目，我们应该显示一个带有可编辑复选框的无序项目。

任何人都可以建议我使用以下代码中的某些内容 - 提前致谢。

class AccessData extends React.Component {
state = {
    files: [],
    communities: [],
    selectedCommunity: { display: 'Select a Community...', value: '' },
    communityValidationError: ""
 }

componentDidMount() {
    let env = clientConfiguration['Environment'];
    let x = `communitiesApi.${env}`;
    alert(clientConfiguration[x]);

    fetch(clientConfiguration['communitiesApi.local'])
        .then((response) => {
        return response.json();
    })
      .then(data => {
            let communitiesFromApi = data.map(community => { return { value: community, display: community } })
            this.setState({ communities: [{ value: '', display: 'Select a Community...' }].concat(communitiesFromApi) });
 })
.catch(error => {
    console.log(error);
    });
  }

handleDDLCommunityChange = (event) => {
    alert(event.target.value);
    this.setState({
        selectedCommunity: event.target.value
    });

    alert(this.state['selectedCommunity'].display);
 }

render() {
    return (
      <main>
        <div className="container">
        <div className="aqview-section">

        <div id="download_tool">
          <form id="download_form" method="post">
            <div className="row">
            <div className="col-md-12">
              <div className="header-box">
                <h2>Data Download Tool</h2>
              </div>
              <select id="communityName" title="Select a Community" name="communityName" onChange={"this.handleDDLCommunityChange.bind(this")} value={"this.state.selectedCommunity"}>
                {this.state.communities.map((community) => <option key={"community.value"} value={"community.value"}>{community.display}</option>)}
              </select>
              <div id="file_list_box">
                <p>
                  <strong>Data Files</strong>
                </p>
                <ul id="file_listing">
                  <li>Please select a community to display available files.</li>
                </ul>
              </div>
              <button id="download" styles="display: none;">Download</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</main>
);
}
}

export default connect()(AccessData);

Answer 1

关于你的第一个问题，setState 异步修改状态。 因此，在调用 setState 之后直接使用 this.state 不会给你新的状态。 相反，setState 采用第二个参数，该函数是在提交状态更改后将被调用的函数，如下所示:

   handleDDLCommunityChange = (event) => {
    alert(event.target.value);
    this.setState({
        selectedCommunity: event.target.value
    }, () => {
      alert(this.state['selectedCommunity'].display);
    });
   }

注意:

在您粘贴的代码中，您在不应该添加字符串引号的情况下添加了字符串引号。您可以将 JSX 中的大括号视为“跳出 HTML 模式并转到 JavaScript”。因此，当您想要将 JS 值绑定(bind)到 HTML 属性时，只需执行以下操作即可:

<option key={community.value}>

其中community是当前范围内的JS变量(在你的Render函数内，与此相同)

对于您的其他问题:

1) 在渲染函数开始时，您可以检查是否应显示按钮的条件并将其保存到变量中:

const shouldShowButton = // Logic that checks

然后在渲染中您可以执行以下操作:

<button id="download" styles={{ display: shouldShowButton ? 'block' : 'none' }} >Download</button>

样式属性采用一个对象，因此使用双花括号。另一种选择是使用 https://www.npmjs.com/package/classnames .

2)在你的handleDDLCommunityChange函数中你可以使用类似https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch的东西。 ，例如:

fetch(/* endpointURL/?community= event.target.value /*).then( /* setState */)

然后使用render内部state中的值来设置shouldShowButton的值

3) 假设您要保存所在州的社区结果列表，这将触发重新渲染，因此您应该能够简单地映射州中的这些项目，就像您选择的方式一样。这是 React 中的一个关键模式，渲染 UI，响应用户交互并将该交互的结果存储在状态中，然后重新渲染。