小编Pue*_*rto的帖子

我在这里错过了简单的答案.现在我的桌子上有一个三元组.如果所选数组长度大于数字,则呈现禁用复选框的表.我还挂钩了一个不同的handleClick函数,表中只有取消选中的禁用复选框.这实际上将复选框变为灰色(禁用它们)并允许用户取消选中,以便他们可以恢复表格.问题是如果他们单击以选择尚未检查的内容(此时已禁用),则会删除所有选定的检查并再次启用该表以供选择.这是一个问题,因为基础数据实际上并未从我正在使用的实时数据库中删除.

所以我在代码沙箱上重新创建了这个问题.(可能需要一秒钟加载)

1. 选择2(应禁用该表)
2. 然后选择任何未选中的复选框,它将删除所有禁用的检查并重新启用该表以供选择.

https://codesandbox.io/s/yw8zl6oqk9

基本上我想要在给定数量的选择下停止用户.我只希望用户能够取消选择当前选择的项目.我真的不认为这是最好的方法.我宁愿保持启用检查颜色,只需将用户停在3(任意数字).我已经在handleClick函数中尝试了一些其他方法,如果它大于3,但它离开了用户的表,他们无法取消选中或检查.如果您有任何想法如何解决这个问题,请告诉我.谢谢!

我被问到一个更清晰的用例,所以这里.

• 用户只能在列表中选择2

• 一旦用户选择2,他们就不能再选择任何其他项目

• 用户可以取消选择一个或多个选定的,然后再次选择最多2个不同的项目

• 用户可以继续选择2个项目,并且只要他们愿意,就可以取消选择以恢复选择能力

具有此用例的问题是当用户选择2时,应该禁用可选择性,当选择未选择的项目时,它取消选择所选择的2个项目.我发布的沙箱反映了这个问题.

所以我让 AppBar 工作正常。我什至没有为此使用粘性，但我认为我需要某种粘性样式来使页面中的元素在用户滚动时基本上固定在顶部。我基本上想要这个。

https://www.w3schools.com/howto/howto_css_sticky_element.asp

但是在我的 React 页面中，我希望我的ProgressBar组件保持在顶部。这个下面的组件RenderTeamSelections是一个大桌子，它会ProgressBar很快地推开视野。我想ProgressBar在用户从表中进行选择时保持视图。这是相关的代码。

 return (

      <div className={rootClassName}>
        <div className="g-row">
          <div className="g-col">
            <AccountProfile {...this.props} />
            <br />
            <Team team={this.props.team} profileDetail={profileDetail} />
            <br />
            <ProgressBar {...this.props} />
            <br />
            <RenderTeamSelections {...this.props] />
          </div>
        </div>
      </div>

    );

我熟悉 withStyles 的使用，并在ProgressBar“固定”、“粘滞”和“-webkit-粘滞”等位置上进行了一些设置，但是当我滚动时还没有让它粘在顶部。任何帮助将不胜感激。我没有看到任何与此场景直接相关的 Material 文档。

这个CORS让我再次屈服。我的意思是令人沮丧。请理解，在您否决我之前，我一直在搜索有关该主题的所有500万个帖子。我意识到在这个问题上有很多东西。这是我的React UI代码中的Fetch Post。它在带有已编译JS的IIS服务器上运行，对于SPA仅运行Index.html。我试图在同一服务器的不同端口上调用API。这是在Chrome和其他现代浏览器中杀死我的预兆（在IE中似乎还不错）。

这是提取：

    return (
        fetch(mypost, {
            method: 'POST',
            headers: {
                "Content-Type": "application/json",
                "Access-Control-Allow-Origin": "*",
                "Accept": "application/json",
            },
            mode: 'cors',
            body: JSON.stringify({
                name: this.state.value,
            })
        }).then(response => {
            if (response.status >= 400) {
                this.setState({
                    value: 'no greeting - status > 400'
                });
                throw new Error('no greeting - throw');
            }
            return response.text()
        }).then(data => {
            var myData = JSON.parse(data);
            this.setState({
                greeting: myData.name,
                path: myData.link
            });
        }).catch(() => {
            this.setState({
                value: 'no greeting - cb catch'
            })
        })
    );

我们都已经看到了标准的预赛错误。

提取API无法加载 …

我在请求类型似乎正在更改的地方抓到我的帖子。我提交基本表格（仅一个字段）。这是提取。

      handleSubmit(event, data) {
    //alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
    console.log("SUBMIT STATE::", this.state.value);
    return (
        fetch("//localhost:5000/api/values/dui/", {
            method: "post",
            mode: 'no-cors',
            headers: {
                'Access-Control-Allow-Origin': '*',
                'Content-Type': 'application/json',
                'Accept': 'application/json',                  
            },
            body: JSON.stringify({
                name: this.state.value,
            })
        }).then(response => {
            if (response.status >= 400) {
                this.setState({
                    value: 'no greeting - status > 400'
                });
                throw new Error('no greeting - throw');
            }
            return response.text()
        }).then(data => {
            var myData = JSON.parse(data);
            this.setState({
                greeting: myData.name,
                path: myData.link
            });
        }).catch(() => {
            this.setState({ …

我已经在其他项目中运行了该记录器，但没有问题运行，react-native log-android为什么该项目文件夹中的记录器失败。这些大多数都是开箱即用的react-native init NewProjects，几乎没有更改。因此令我惊讶的是我无法运行记录器。我更喜欢cmd记录器。它比运行chrome浏览器更快。

? react-native log-android
info Starting logkitty
The filename, directory name, or volume label syntax is incorrect.
error Command failed: 'C:\Users\{UserPIN}\AppData\Local\Android\Sdk/platform-tools/adb' logcat -c
The filename, directory name, or volume label syntax is incorrect.
. Run CLI with --verbose flag for more details.
Error: Command failed: 'C:\Users\{UserPIN}\AppData\Local\Android\Sdk/platform-tools/adb' logcat -c
The filename, directory name, or volume label syntax is incorrect.

    at spawnLogcatProcess (c:\ws\mobile2\ReactRegLoc\node_modules\logkitty\build\android\adb.js:36:11)
    at runAndroidLoggingProcess (c:\ws\mobile2\ReactRegLoc\node_modules\logkitty\build\android\adb.js:21:10)
    at logkitty (c:\ws\mobile2\ReactRegLoc\node_modules\logkitty\build\api.js:137:85)    at Object.logAndroid [as func] (c:\ws\mobile2\ReactRegLoc\node_modules\@react-native-community\cli-platform-android\build\commands\logAndroid\index.js:37:44)
    at …

我不认为这需要绑定才能看到响应，但我一定遗漏了一些东西，因为我从这个 Fetch/post 得到了响应。这是我的收获。

 export default class Test extends Component {
constructor(props) {
super(props);
this.state = { value: '' };

this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
componentDidMount() { }

 handleChange(event) {
this.setState({ value: event.target.value });
}

 handleSubmit(event, cb) {
   event.preventDefault();

return (
  fetch('test/post', 'POST')
    .then(response => {
      if (response.status >= 400) {
        this.setState({
          value: 'error',
        });
        throw new Error('Throw Error');
      }
      console.log('REACT::RESPONSE', response.json());
      return response.json();
    })
    .then(cb)
    .catch(() => {
      this.setState({
        value: 'error cb',
      });
    })
);
  }

帖子看起来不错。它击中了我的 webApi，我得到了回复。我使用 …